一.vue中的css动画原理（transition）

1.过渡显示

（1）transition标签

transition表示包裹的内容会有一个动画过渡效果，动画效果必须包含在transition标签里。

（2）动画流程

transition包裹后会vue会自动分析css样式，构建一个动画流程。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>vue中的css动画原理</title><script src="../vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.fade-enter {opacity: 0;}     /* fade-enter被移除,opacity将恢复到1 *//* 这个变化将在3s种内完成 */.fade-enter-active {transition: opacity 3s;}/* 对opacity进行transition监控,若opacity变化会在三秒钟从0变到opacity的值 *//* .v-enter{opacity: 0;}.v-enter-active{transition: opacity 3s;  } */</style></head><body><div id="root"><transition name="fade">  <!-- 不屑name默认前缀为v --><!-- 动画效果必须包含在transition标签里transition表示包裹的内容会有一个动画过渡效果--><!-- transition包裹后会vue会自动分析css样式，构建一个动画流程 --><div v-if="show">hello world</div></transition><button type="button" @click="handleClick">切换</button></div><script type="text/javascript">var vm = new Vue({el:'#root',data:{show:true},methods:{handleClick:function(){this.show=!this.show}}})</script></body>
</html>

流程：a.动画将要执行时，fade-enter与fade-enter-active生成。
b.第二帧时，fade-enter被消除，opacity将恢复到1。
c.将会在3s内完成恢复。

2.过渡隐藏

（1）动画流程

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.v-enter{opacity: 0;}.v-enter-active{transition: opacity 20s;}.v-leave-to{opacity: 0;}.v-leave-active{transition: opacity 5s;    }/* opacity默认值为1。 */    </style></head><body><div id="root"><transition><div v-if="show"><!-- v-if与v-show都可以只要用transition包裹 -->hello world</div></transition><button type="button" @click="handleClick">切换</button></div><script type="text/javascript">var vm = new Vue({el:'#root',data:{show:true},methods:{handleClick:function(){this.show=!this.show}}})</script></body>
</html>

二.在Vue中使用Animate.css库（keyframes）

1.在vue中如何使用@keyframes方式的动画

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>在Vue中使用Animate.css库</title><script src="../vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css">/* 名字为bounce-in的动画效果 */@keyframes bounce-in{0%{transform: scale(0);}50%{transform: scale(1.5);}100%{transform: scale(1);}}.fade-enter-active{transform-origin: left center;animation: bounce-in 1s;  /* 一秒内运行结束 */}.fade-leave-active{transform-origin: left center;animation: bounce-in 1s reverse;   /* revers让动画反向执行 */}</style></head><body><div id="root"><transition name="fade"><div v-if="show">hello world</div></transition><button type="button" @click="handleClick">切换</button></div><script type="text/javascript">var vm = new Vue({el:'#root',data:{show:true},methods:{handleClick:function(){this.show=!this.show}}})</script></body>
</html>

自定义class名字

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css">@keyframes bounce-in{0%{transform: scale(0);}50%{transform: scale(1.5);}100%{transform: scale(1);}}.active{transform-origin: left center;animation: bounce-in 1s;}.leave{transform-origin: left center;animation: bounce-in 1s reverse;}</style></head><body><div id="root">     <transition name="fade"enter-active-class="active"    leave-active-class="leave"  ><!-- 自定义class名字 --><div v-if="show">hello world</div></transition><button type="button" @click="handleClick">切换</button></div><script type="text/javascript">var vm = new Vue({el:'#root',data:{show:true},methods:{handleClick:function(){this.show=!this.show}}})</script></body>
</html>

2.使用animate.css库

animate.css网址https://animate.style/
animate.css所提供的动画就是@keyframes类型的css动画效果。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../vue.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="../animate.css"/><style type="text/css"></style></head><body><div id="root"><transition name="fade"enter-active-class="animated wobble"leave-active-class="animated wobble"  ><!-- 使用animate动画，入场出场的名字都要是animated --><div v-if="show">hello world</div></transition><button type="button" @click="handleClick">切换</button></div><script type="text/javascript">var vm = new Vue({el:'#root',data:{show:true},methods:{handleClick:function(){this.show=!this.show}}})</script></body>
</html>

三.在vue中使用过度和动画

1.第一次显示如何有动画效果

appear-active-class要使网页第一次显示也有动画就要加上，还需要在上面声明appear

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../vue.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="../animate.css"/><style type="text/css"></style></head><body><div id="root"><transition name="fade"appearenter-active-class="animated wobble"leave-active-class="animated wobble"  appear-active-class="animated wobble"><!-- 使用animate动画，入场出场的名字都要是animated --><!-- appear-active-class要使网页第一次显示也有动画就要加上，还需要在上面声明appear --><div v-if="show">hello world</div></transition><button type="button" @click="handleClick">切换</button></div><script type="text/javascript">var vm = new Vue({el:'#root',data:{show:true},methods:{handleClick:function(){this.show=!this.show}}})</script></body>
</html>

2.既要有@keyframes动画效果又要有transition效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../vue.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="../animate.css"/><style type="text/css">.fade-enter,.fade-leave-to{opacity: 0;}.fade-enter-active,.fade-leave-active{transition: opacity 2s;}</style></head><body><div id="root"><!-- type="transition"   设置动画时常与transition为准 --><!-- :duration="10000" 自定义动画时间 --><transition <!-- type="transition" --><!-- :duration="10000" -->:duration="{enter:5000,leave:10000}"<!-- enter为入场动画，leave为出场 -->name="fade"appearenter-active-class="animated flash fade-enter-activa"leave-active-class="animated wobble fade-leave-active"  appear-active-class="animated wobble"><!-- 使用animate动画，入场出场的名字都要是animated --><!-- appear-active-class要使网页第一次显示也有动画就要加上，还需要在上面声明appear --><div v-if="show">hello world</div></transition><button type="button" @click="handleClick">切换</button></div><script type="text/javascript">var vm = new Vue({el:'#root',data:{show:true},methods:{handleClick:function(){this.show=!this.show}}})</script></body>
</html><!-- 总结：通过appear与 appear-active-class实现页面初次动画。即使用transition动画又使用@keyframes动画。type确定与哪一种动画时常为准。使用duration设置动画时常。 -->

四.Vue中的Js动画与Velocity.js的结合

1.入场动画

（1）动画钩子before-enter

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="root"><transitionname="fade" @before-enter="handleBefoeEnter"@enter="handleEnter"><!-- 当@before-enter运行玩，动画开始运行，动画都写在在handleEnter里。 --><div v-show="show">Hello World</div></transition><button type="button" @click="handleClick">toggle</button></div><script type="text/javascript">var vm = new Vue({el:"#root",data:{show:true},methods:{handleClick:function(){this.show=!this.show},// el值是动画包裹的div标签handleBefoeEnter:function(el){el.style.color ='red'},// el值一样是动画包裹的div标签,done是回调函数handleEnter:function(el,done){setTimeout(() =>{el.style.color = 'green'done()//执行结束后要调用done函数，相当于告诉Vue已经执行完了},2000)},// 点击toggle后,变成红色,动画开始运行,2秒中变成绿色}})</script></body>
</html>

（2）动画钩子enter与after-enter

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="root"><transitionname="fade" @before-enter="handleBefoeEnter"@enter="handleEnter"@after-enter="handleAfaterEnter"><!-- 当@before-enter运行玩，动画开始运行，动画都写在在handleEnter里。 --><div v-show="show">Hello World</div></transition><button type="button" @click="handleClick">toggle</button></div><script type="text/javascript">var vm = new Vue({el:"#root",data:{show:true},methods:{handleClick:function(){this.show=!this.show},// el值是动画包裹的div标签handleBefoeEnter:function(el){el.style.color ='red'},// el值一样是动画包裹的div标签,done是回调函数handleEnter:function(el,done){setTimeout(() =>{el.style.color = 'green'done()//执行结束后要调用done函数，相当于告诉Vue已经执行完了},2000)setTimeout(() => {done()},4000)},// 点击toggle后,变成红色,动画开始运行,2秒中变成绿色,4秒算结束handleAfaterEnter:function(el){el.style.color = "#000"}}})</script></body>
</html>

2.出场动画

分别对应的动画钩子为
（1）@before-leave
（2）@leave
（3）@after-enter

3.velocity.js

Vue入门笔记Day 8相关推荐

VUE入门笔记，第二节
VUE入门笔记,第二节一.总结以上:实例-表格列表 [目标:实现表格数据的添加.删除和过滤筛选] [解决方案] <!DOCTYPE html> <html lang="e ...
VUE入门笔记，第一节
VUE入门笔记,第一节一.MVVM分层思想 M:用来保存每个页面中的单独的数据 V:每个页面中的HTML结构 VM:它是M和V层的调度者,它分割了M和V层,用于处理M和V层的数据双向绑定二.VUE ...
vue入门笔记（一）
Vue Day 01 B站原视频地址注:本文只是记录自己的学习过程文章目录 Vue Day 01 一.邂逅Vuejs 1.1.认识Vuejs 1.2.Vue的初体验 1.3.创建Vue时, opt ...
后端小白的VUE入门笔记, 前端高能慎入
因为项目需要前后端分离,后端竟然不用控制view层了,页面的跳转后端不再干涉,(前端的vue经过打包后成了一张index.html) 后端只需要响应给前端json串就ok,其实这不是爽歪歪?但是觉得还 ...
后端小白的VUE入门笔记, 进阶篇
使用 vue-cli( 脚手架) 搭建项目基于vue-cli 创建一个模板项目通过 npm root -g 可以查看vue全局安装目录,进而知道自己有没有安装vue-cli如果没有安装的话,使用如 ...
vue入门笔记（三）
Vue Day 03 文章目录 Vue Day 03 一.v-model的使用(表单绑定) 1.1.v-model的基本使用 1.2.v-model的原理 1.3.v-model结合radio的类型使 ...
vue router 入门笔记
vue router 入门笔记 tips: components优先级大于component,即当一个route对象里同时配置了component和components时component视为无效即 ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...

Vue入门笔记Day 8