使用动画效果要用transition包裹，transition(<trsnsition name="xx"><div></div></transition>)是将所包裹的单个元素赋予过渡效果。当元素被transition包裹之后，vue会自动分析里面元素的css样式，然后构建一个动画流程

显示：

在动画即将执行的瞬间，会在内部元素上面增加两个class(xx-enter, xx-enter-active),当动画第一帧执行结束后，发现有动画效果，vue在动画运行到第二帧的时候，去掉xx-enter类，加上xx-enter-to类，接着当动画结束时vue会把之前添加的xx-enter-active，xx-enter-to去掉.

隐藏：

 

使用css3动画@keyframes,自定义类名

 

使用Animate.css库

ps:刷新即显示动画

同时使用transition过渡动画和css动画，设置优先时间

 

自定义动画播放时长  :duration="10000" 持续10s

自定义复杂动画播放时长:入场时间，出场时间

使用js钩子实现入场动画

 

使用js钩子实现出场动画

使用Velocity.js实现动画

多个元素的过渡效果

 

ps：out-in先隐藏再展示        in-out先展示在隐藏

多个组件的过渡效果

 

列表过渡

 

动画封装

最新文章

1. Tortoise 下修改服务器路径（Relocate与Switch）
2. JavaScript valueOf() 函数详解
3. Android图片浏览器之图片删除
4. JSBinding + SharpKit / 使用 Firefox 调试 JS
5. Understanding and Using Servlet Filters
6. UILabel 根据内容的多少来计算label的frame
7. C#删除微信自定义菜单
8. 自动化构建jenkins配置
9. 召回率与准确率[ZZ]
10. js动画学习（五）
11. hdu2159二维费用背包
12. Java 泛型 Java使用泛型的意义
13. webpack入门与解析(一)
14. Core Animation 文档翻译 （第七篇）——改变Layer的默认动画
15. Game Engine Architecture 6
16. 【HDU1848】Fibonacci again and again（博弈论）
17. stm32专属于菜鸟的学习方法
18. 验证码处理类：UnCodebase.cs + BauDuAi 读取验证码的值(并非好的解决方案)
19. android -------- 解决NDK开发中的 Method &#39;NewStringUTF&#39; could not be resolved
20. docker 配置pull源

热门文章

1. vue进行文件下载
2. winform左右滑动
3. java笔记 -- 数学函数与常量
4. js时间戳转化成日期格式
5. SOAPdenove 使用
6. Oracle数据库联机重定义讲解及错误处理
7. vue-router中query和params传参(接收参数）以及$router、$route的区别
8. two week summary
9. react-router解决锚点跳转问题
10. Tomcat和java的安装