前端框架vue.js系列（11）：元素动画过渡效果

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

（1）在CSS过渡和动画中自动应用 class

（2）配合使用第三方 CSS 动画库，引入animate.css实现效果过渡

（3）配合使用第三方 JavaScript 动画库，引入velocity.js实现效果过渡

（4）引入tween.js数值实现数值过渡

在CSS过渡和动画中自动应用 class

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡。也就是说，使用这种方法实现过渡效果，需要将实现效果的标签放到<transition >transition>内。当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
2. 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

参考Demo：

	
    			Toggle
  			
	
		
大家好，这里是过渡动画测试
	

点击按钮即可看到过渡效果。

（注）从上面例子可看到定义了name为'fade'，这个'fade'的作用在于命名过渡动画样式，如上例子中的样式.fade-?-?。这是这种过渡效果的命名规则。在进入/离开的过渡中，会有 6 个 class 切换：

.name-enter:定义进入过渡的开始状态，在元素被插入时生效，在下一个帧移除。
.name-enter-active:定义过渡的状态。在元素整个过渡过程中作用,这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
.name-enter-to: 2.1.8版及以上,定义进入过渡的结束状态。在元素被插入一帧后生效。
.name-leave: 定义离开过渡的开始状态,在离开过渡被触发时生效，在下一个帧移除。
.name-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
.name-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)。

上例中的运行过程如图所示：

引入animate.css实现效果过渡

这种方法需要引用animate.css，百度上搜一下即可下载。它在进入/离开的过渡中，也会有 6 个 状态切换，与上一种类似：

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

参考Demo：

	
    			Toggle render
  			
	
		
hello
	

（注）所包含的动画效果可以到animate.css官网查看。

引入velocity.js实现效果过渡

通过使用transition的钩子函数监听，监听状态类别如下：
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>

参考Demo：

	
   				 Toggle
  			
	
		

			Demo
		
	






	
	
		
{{ item.msg }}
	

引入tween.js数值实现数值过渡

这种过渡效果是：当数字变化时，有一个动态的数字滚动效果。

参考Demo：

	{{animatedNumber}}
	改变数值