Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：

  1. 在 CSS 过渡和动画中自动应用 class
  2. 可以配合使用第三方 CSS 动画库，如 Animate.css
  3. 在过渡钩子函数中使用 JavaScript 直接操作 DOM
  4. 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

下面分别从这个4个工具来学习Vue动画效果。

一、单元素/组件的过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

  • 条件渲染 (使用 v-if)
  • 条件展示 (使用 v-show)
  • 动态组件
  • 组件根节点

一个典型的例子：

Html文件

  1. <div id="app">
  2.         <transition name="fade">
  3.             <div v-if="show">
  4.                 Hello world.
  5.             </div>
  6.         </transition>
  7.         <button @click="handleClick">切换</button>
  8.     </div>

　　

js文件

  1. <script>
  2.  
  3.         // 1. 创建Vue的实例
  4.         let vm = new Vue({
  5.             el:'#app',
  6.             data:{
  7.                 show:false
  8.             },
  9.             methods:{
  10.                 handleClick:function(){
  11.                     this.show = !this.show
  12.                 }
  13.             }
  14.         });
  15.     </script>

　　

css文件

  1. <style>
  2.         .fade-enter-active, .fade-leave-active {
  3.           transition: opacity 2s;
  4.         }
  5.         .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  6.           opacity: 0;
  7.         }
  8. </style>

　　

这个例子的效果为：点击切换，文字会淡入淡出。

实现原理：

1、通过使用transition组件后， Vue 将会做以下处理：

  • 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
  • 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
  • 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

2、动画进入时，Vue会添加CSS类，如果没有使用name="fade"的话，类名为v-fade-enter、v-fade-eneter-active等。

第一帧动画，会自动添加fade-enter和fade-enter-active类

第二帧动画，会去掉fade-enter类，添加fade-enter-to类

第三帧动画，会去掉所有enter类

3、动画在离开时同样会添加或删除CSS类

二、Vue使用animate.css动画库

1、使用自定义类

效果为：进入或离开都会有拉升效果。

注意：这里我们使用了

  1. name="bounce"替换了默认的fade。当然，如果没有fade的话，也会有v-作为默认开头。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.  
  8.         @keyframes bounce-in {
  9.           0% {
  10.             transform: scale(0);
  11.           }
  12.           50% {
  13.             transform: scale(1.5);
  14.           }
  15.           100% {
  16.             transform: scale(1);
  17.           }
  18.         }
  19.  
  20.         .bounce-enter-active {
  21.           animation: bounce-in .5s;
  22.         }
  23.         .bounce-leave-active {
  24.           animation: bounce-in .5s reverse;
  25.         }
  26. </style>
  27.  
  28. </head>
  29. <body>
  30.     <div id="app">
  31.         <transition name="bounce">
  32.             <div v-if="show">
  33.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.
  34.             </div>
  35.         </transition>
  36.         <button @click="handleClick">切换</button>
  37.     </div>
  38.  
  39.     <script src="js/vue.js"></script>
  40.     <script>
  41.  
  42.         // 1. 创建Vue的实例
  43.         let vm = new Vue({
  44.             el:'#app',
  45.             data:{
  46.                 show:false
  47.             },
  48.             methods:{
  49.                 handleClick:function(){
  50.                     this.show = !this.show
  51.                 }
  52.             }
  53.         });
  54.     </script>
  55.     </body>
  56.     </html>

　　我们这里还可以使用自定义类：

既然我们可以使用自定义class，那么我们就可以使用开源的第三方CSS库，比如animate.css库。

https://daneden.github.io/animate.css/

使用很简单，直接替换上面我们自定义的class就行。

使用animate.css注意事项：

1、必须使用自定义class的模式

enter-active-class=""

2、animated类放在前面，且是必须的

三、Vue中同时使用过渡和动画

1、初次动画效果

上面例子中，我们初次进入的时候没有动画效果，我们可以做如下修改：

2、如果我们希望在上面的例子中还加入一开始我们说的过渡效果，那该怎么做呢？

1、因为animate.css有一个自己的动画效果时长，fade也有一个opacity，那么以哪一个为准呢？我们可以使用type="transition"来确定哪个为准。

2、我们也可以自己设定动画效果时长样式：duration里面的enter为进入时长，leave为动画离开时长，都是针对过渡效果的。

四、Vue中的js动画配合使用第三方动画库（Velocity.js）

Html

  1. <div id="app">
  2.         <transition name="fade"
  3.         @before-enter="beforeEnter"
  4.         @enter="enter"
  5.         >
  6.             <div v-if="show">
  7.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.
  8.             </div>
  9.         </transition>
  10.         <button @click="handleClick">切换</button>
  11.     </div>

　　

Js

  1.  methods:{
  2.                 handleClick:function(){
  3.                     this.show = !this.show
  4.                 },
  5.                 beforeEnter: function (el) {
  6.                   el.style.opacity = 0
  7.                   el.style.transformOrigin = 'left'
  8.                 },
  9.                 enter: function (el, done) {
  10.                   Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
  11.                   Velocity(el, { fontSize: '1em' }, { complete: done })
  12.                 },
  13.             }

　　

五、多个元素或组件的过渡动画

1、多个元素的过渡动画实现

Html

  1.  <div id="app">
  2.         <transition name="fade" mode="in-out">
  3.             <div v-if="show" key='one'>组件1</div>
  4.             <div v-else key='two'>组件2</div>
  5.         </transition>
  6.         <button @click="handleClick">切换</button>
  7.     </div>

　　

style

  1. <style>
  2.         .fade-enter-active, .fade-leave-active {
  3.           transition: opacity 1s;
  4.         }
  5.         .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  6.           opacity: 0;
  7.         }
  8. </style>

　　注意：这里需要绑定一个key，因为vue会复用，所以不加key就不会有效果。

2、多个组件的过渡动画实现

Html

  1. <div id="app">
  2.         <transition name="fade" >
  3.            <child-one v-if="show"></child-one>
  4.            <child-two v-else></child-two>
  5.         </transition>
  6.         <button @click="handleClick">切换</button>
  7.     </div>

　　

js

  1. <script>
  2.         Vue.component('child-one',{
  3.             template:'<div>child-one</div>'
  4.         })
  5.         Vue.component('child-two',{
  6.             template:'<div>child-two</div>'
  7.         })
  8.         // 1. 创建Vue的实例
  9.         let vm = new Vue({
  10.             el:'#app',
  11.             data:{
  12.                 show:false
  13.             },
  14.             methods:{
  15.                 handleClick:function(){
  16.                     this.show = !this.show
  17.                 }
  18.             }
  19.         });
  20.     </script>

　　

css

  1. <style>
  2.         .fade-enter-active, .fade-leave-active {
  3.           transition: opacity .4s;
  4.         }
  5.         .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  6.           opacity: 0;
  7.         }
  8. </style>

　　

我们可以通过Vue自带的compoent标签实现动态组件，data中show改成type，type:‘child-one’

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .fade-enter-active, .fade-leave-active {
  8.           transition: opacity .4s;
  9.         }
  10.         .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  11.           opacity: 0;
  12.         }
  13. </style>
  14.  
  15. </head>
  16. <body>
  17.     <div id="app">
  18.         <transition name="fade" >
  19.             <component :is="type"></component>
  20.  
  21.         </transition>
  22.         <button @click="handleClick">切换</button>
  23.     </div>
  24.  
  25.     <script src="js/vue.js"></script>
  26.     <script>
  27.         Vue.component('child-one',{
  28.             template:'<div>child-one</div>'
  29.         })
  30.         Vue.component('child-two',{
  31.             template:'<div>child-two</div>'
  32.         })
  33.         // 1. 创建Vue的实例
  34.         let vm = new Vue({
  35.             el:'#app',
  36.             data:{
  37.                 type:'child-one'
  38.             },
  39.             methods:{
  40.                 handleClick:function(){
  41.                     this.type = this.type==='child-one'?'child-two':'child-one'
  42.                 }
  43.             }
  44.         });
  45.     </script>
  46.     </body>
  47.     </html>

　　

六、Vue中列表的过渡动画

当我们希望对列表进行过渡效果时，使用transition-group标签就可以了。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .fade-enter-active, .fade-leave-active {
  8.           transition: opacity 1s;
  9.           color: red;
  10.         }
  11.         .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  12.           opacity: 0;
  13.         }
  14. </style>
  15.  
  16. </head>
  17. <body>
  18.     <div id="app">
  19.         <transition-group name="fade">
  20.             <div v-for="item in list" key="item.id">{{item.title}}</div>
  21.         </transition-group>
  22.  
  23.         <button @click="handleClick">增加</button>
  24.     </div>
  25.  
  26.     <script src="js/vue.js"></script>
  27.     <script>
  28.         var count = 0
  29.         // 1. 创建Vue的实例
  30.         let vm = new Vue({
  31.             el:'#app',
  32.             data:{
  33.                list:[]
  34.             },
  35.             methods:{
  36.                 handleClick:function(){
  37.                     this.list.push({
  38.                         id:count++,
  39.                         title:'hello kitty!'
  40.  
  41.                     })
  42.                 }
  43.             }
  44.         });
  45.     </script>
  46.     </body>
  47.     </html>

　　

七、动画封装

我们可以将动画以组件的方式进行封装起来，以后需要使用这个动画时，直接通过插槽将组件放入插槽即可。

例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src='js/velocity.min.js'></script>
  7.  
  8. </head>
  9. <body>
  10.     <div id="app">
  11.        <fade :show="show">
  12.            <div>
  13.                hello div
  14.            </div>
  15.        </fade>
  16.        <fade :show="show">
  17.            <h1>hello H1</h1>
  18.        </fade>
  19.  
  20.         <button @click="handleClick">增加</button>
  21.     </div>
  22.  
  23.     <script src="js/vue.js"></script>
  24.     <script>
  25.         Vue.component('fade',{
  26.             props:['show'],
  27.             template:`<transition @before-enter="handleBeforeEnter"
  28.             @enter="handleEnter">
  29.              <slot v-if="show"></slot>
  30.             </transition>`,
  31.             methods:{
  32.                 handleBeforeEnter:function(el){
  33.                     el.style.color="red"
  34.                 },
  35.                 handleEnter:function(el,done){
  36.                     setTimeout(()=>{
  37.                         Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
  38.                         Velocity(el, { fontSize: '1em' }, { complete: done })
  39.                         done()
  40.                     },2000)
  41.                 }
  42.             }
  43.         })
  44.         // 1. 创建Vue的实例
  45.         let vm = new Vue({
  46.             el:'#app',
  47.             data:{
  48.                show:false
  49.             },
  50.             methods:{
  51.                 handleClick:function(){
  52.                     this.show=!this.show
  53.                 }
  54.             }
  55.         });
  56.     </script>
  57.     </body>
  58.     </html>

　　我们这里封装了一个fade组件，通过transition封装一个slot，里面可以支持N个内容。然后将动画效果封装到钩子函数，然后在钩子函数里面放入CSS效果。这样，就将动画效果完全封装在一个组件中了，随时随地可以使用这个带动画的组件啦。

写了这么多，其实就是开头的四种方式：

  1. 在CSS过渡和动画中自动应用class【默认为fade开头，也可以自定义，不写name时为v开头】
  2. 可以配合使用第三方 CSS 动画库，如 Animate.css【自定义class的方式】
  3. 在过渡钩子函数中使用 JavaScript 直接操作 DOM
  4. 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

Vue中的动画效果的更多相关文章

  1. Vue中过度动画效果应用

    一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name=" ...

  2. Vue 中的动画特效

    Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. Vue过渡和动画效果展示（案例、GIF动图演示、附源码）

    前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...

  4. vue中使用动画vue-particles实现背景粒子酷炫效果

    先来看我做的效果 我这个是用的背景色加上这个粒子效果实现的demo 平时我们做项目的话会添加背景图片这些,可能更加好看 看我的实现步骤 cnpm install -g vue-cli vue init ...

  5. vue中css动画原理

    显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition& ...

  6. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  7. Android中的动画效果

    动画的种类 透明动画alphaAnimation 在代码中配置动画: findViewById(R.id.btnAnimMe).setOnClickListener(new View.OnClickL ...

  8. css3实现的3中loading动画效果

    一.css3中animation动画各种属性详解: animation Value:     [<animation-name> || <animation-duration> ...

  9. css3中的动画效果

    css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...

随机推荐

  1. python列表操作大全

    Python列表操作大全 对于python列表的理解可以和C语言里面的数组进行比较性的记忆与对照,它们比较相似,对于python里面列表的定义可以直接用方括号里加所包含对象的方法,并且python的列 ...

  2. PC启动过程详解

    系统启动过程 1. 预引导(Pre-Boot)阶段 2. 引导阶段 3. 加载内核阶段 4. 初始化内核阶段 5. 用户登录阶段 基本概念: BIOS:即“Basic Input/Output Sys ...

  3. element table中使用el-select

    效果: 然后看代码: 注意事项: el-select的v-model要和option的value值对应,注意是string还是number类型哦- 此文转载别人

  4. Java并发 行级锁/字段锁/表级锁 乐观锁/悲观锁 共享锁/排他锁 死锁

    原文地址:https://my.oschina.net/oosc/blog/1620279 前言 锁是防止在两个事务操作同一个数据源(表或行)时交互破坏数据的一种机制. 数据库采用封锁技术保证并发操作 ...

  5. Oracle数据的导入与导出

    本文针对window操作系统与oracle12C的版本. 1.sqlplus执行单个sql文件 1.执行sqlplus登陆命令:sqlplus username/password@host:port/ ...

  6. GlusterFS分布式存储系统

    一,分布式文件系统理论基础 1.1 分布式文件系统出现 计算机通过文件系统管理,存储数据,而现在数据信息爆炸的时代中人们可以获取的数据成指数倍的增长,单纯通过增加硬盘个数来扩展计算机文件系统的存储容量 ...

  7. mybatis3.1-[topic-16-17]-映射文件_增删改查_insert_获取自增主键的值

    笔记要点出错分析与总结 /**测试第16章的增,删,改 的内容 * 错误1: <insert id="addEmp" parameterType="com.bean ...

  8. c++ vector容器基本用法

    基本用法 #include<iostream> #include<string> #include<vector> using namespace std; cla ...

  9. 设置input 中placeholder的样式

    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ position: relative; top: 4px; } ::-moz-place ...

  10. python 查询每周最后一个工作日

    背景: 做定时任务时,一般都是写死每周五XXXXX,但有时遇到节假日的情况,周五可能不是本周最后一个工作日 代码如下: import urllib2,datetime,json nowTime = d ...