Vue 第四章 动画效果、animate第三方插件动画效果
1、动画效果
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--cdn镜像快速导入Vue包--> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> <!--v-enter,是进入之前,元素起始状态 --> <style> /*v-enter,是进入之前,元素起始状态*/ /*v-leave-to,是动画离开之后的终止状态,*/ .v-enter, .v-leave-to{ opacity:0; transform: translateX(80px); } /*v-enter-active :入场的动画时间段*/ /*v-leave-active :离场的动画时间段*/ .v-enter-active, .v-leave-active{ transition: all 0.4s ease; } /*自定义前缀*/ .my-enter, .my-leave-to{ opacity:0; transform: translateY(80px); } /*v-enter-active :入场的动画时间段*/ /*v-leave-active :离场的动画时间段*/ .my-enter-active, .my-leave-active{ transition: all 0.4s ease; } </style> </head> <body> <div id="app"> <!--插值表达式--> <input type="button" value="toggle" @click="flag=!flag"></input> <!--使用transition元素,把需要被动画控制的元素包裹起来,它是Vue官方提供的 --> <transition> <h1 v-if="flag">{{msg}}</h1> </transition> <!--自定义前缀--> <!--插值表达式--> <input type="button" value="toggle" @click="flag=!flag"></input> <!--使用transition元素,把需要被动画控制的元素包裹起来,它是Vue官方提供的 --> <transition name="my"> <h6 v-if="flag">{{msg}}</h6> </transition> </div> <script> //2.创建一个vue实例 var vm = new Vue({ el: '#app', //表示当前我们new的这个Vue实例,要控制页面上的哪个区域 data: { //data属性中存放的是el中要用到的数据 flag:false, msg: '欢迎学习Vue' //通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序 } }) </script> </body> </html>
2、animate第三方插件动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--cdn镜像快速导入Vue包--> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--cdn镜像快速导入Vue包--> <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> </head> <body> <div id="app"> <!--插值表达式--> <input type="button" value="toggle" @click="flag=!flag"></input> <!--使用transition元素,把需要被动画控制的元素包裹起来,它是Vue官方提供的 --> <!-- 使用animated第三方库,制作动画--> <!-- :duration="毫秒值" 来统一设置入场和离场时候的动画时长--> <!-- :duration="{enter:200,leave=400}" 来统一设置入场和离场时候的动画时长--> <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="800"> <h1 v-if="flag" class="animated">{{msg}}</h1> </transition> </div> <script> //2.创建一个vue实例 var vm = new Vue({ el: '#app', //表示当前我们new的这个Vue实例,要控制页面上的哪个区域 data: { //data属性中存放的是el中要用到的数据 flag:false, msg: '欢迎学习Vue' //通过Vue提供的指令,很方便的就能把数据渲染到页面上,程序 } }) </script> </body> </html>
本文来自博客园,作者:小白啊小白,Fighting,转载请注明原文链接:https://www.cnblogs.com/ywjfx/p/12545196.html