VueCLI核心知识4:动画效果、过渡效果

1 动画效果

【代码】

html 复制代码
<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>

    <!-- <transition name="xxx" :appear="true">   可以指定name属性,也可以不指定,name属性在有多个动画的时候比较有用 -->
    <transition :appear="true">
        <h1 v-show="isShow" class="hello">你好啊!</h1>
    </transition>
    
  </div>
</template>

<script>
    export default {
        name: 'Test',
        data() {
            return {
                isShow: true
            }
        }

    }
</script>

<style>
    .hello {
        background-color: skyblue;
        color: red;
        padding: 20px;
    }
    /* 动画 */
    .v-enter-active {
        animation: play .5s linear infinite;
    }
        
    .v-leave-active {
        animation: play .5s linear infinite;
        animation-direction: reverse;
    }

    @keyframes  play{
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0px);
        }
    }
</style>

2 过渡效果


3 使用动画库实现动画效果

1.安装

css 复制代码
npm install animate.css

2.导入

复制代码
import 'animate.css';

3.使用

相关推荐
前端君5 小时前
实现最大异步并发执行队列
javascript
知识分享小能手6 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队7 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军8 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy8 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端8 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿8 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL8 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉8 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~8 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js