GSO (vue05)

Vue.js 过渡 & 动画

过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：
v-enter是一个时间点,是dom元素显示之前,元素的起始状态
v-enter-to是dom元素显示之后,离开的终止状态,此时,元素动画结束，(与此同时 v-enter 被移除)，在过渡/动画完成之后移除
v-leave: 定义元素隐藏过渡的开始状态。在离开过渡被触发时立刻生效。
v-leave-to: （2.1.8版及以上） 定义隐藏过渡的结束状态。在隐藏过渡被触发生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
v-leave-active和v-leave-active：定义隐藏/显示过渡生效时的状态。在整个离开过渡的阶段中应用，在隐藏/显示过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义隐藏/显示过渡的过程时间，延迟和曲线函数。
(往往v-enter和v-leave-to是同一种样式（隐藏），v-enter-to和v-leave是同一种样式（显示）)
实例：

 <input type="button" @click="flag=!flag" value="切换" />
		   <transition>
			   <h3 v-show="flag">你好啊</h3>
		   </transition>
		   			data:{
				flag:false
			}

<style type="text/css">
    	.v-enter,.v-leave-to
		{
			 opacity: 0;   
			  transform:translateX(150px);
		}
		
		.v-enter-active,
		.v-leave-active
		{
			transition: all 0.4s ease;
		}
</style>

需要动画效果的标签用transition标签包裹，若transition标签设置了name例如

<transition name="my-transition">

那么v-enter 会替换为 my-transition-enter
其他同上。此时样式与标签之间通过name互相绑定。
transition标签还有一个mode属性控制过渡模式
例如：<transition name="fade" mode="out-in">

in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
默认是新旧元素同时变化

v-for循环的元素想要动画效果，用transition-group

- <transition-group appear>

• 给transition-group添加appear会给元素增加入场效果
• transition-group将会被自动渲染成span标签，使用tag="ul"属性可是自定义 transition-group被渲染为哪种标签。

第三方animate.css类库实现动画

在网上下载animate.css库
在animate.css网站寻找自己想要的效果
使用方法见例子：
在选用的样式名前加animated

<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceIn"  :duration="200">

也可以在被包裹元素中只添加一次

 <transition enter-active-class="bounceIn" leave-active-class="bounceIn">
		   <h3 v-show="flag" class="animated">你好啊</h3>
	   </transition>

duration属性用来设置过度持续时间
也可以这样写：:duration="{ enter: 500, leave: 800 }
（animated经个人测试不添加也能有相同效果）
使用animated库会覆盖掉在style中对每个阶段设置的样式。

钩子函数实现半场动画

可以理解为动画的生命周期钩子函数：

<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"
>

通过将methods中的函数与动画效果的各个时期绑定（enter-cancelled不知道啥意思）
enter函数中要在前面加上el.offsetWidth;，这句话没有意义,但是不写就出不来动画效果

.v-move
	{
		transition:all 0.5s ease;
	}
	.v-leave-active
	{
		position: absolute;
	}
这样的固定搭配可以让被tansition包裹元素位置变化有动画效果（元素设置为绝对定位时若未设置大小，则自动最小化，所以最好提前给元素设置大小）