01  

动画truansition

vue本身并不产生动画，它会在元素显示与隐藏时候自动添加一些类名，程序员可以通过这些类名来设计动画

Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。

语法

<transition name="过渡名称">
<div></div>
</transition>

简单列子

<div id="demo">
<button v-on:click="show = !show">Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>

new Vue({
el: '#demo',data: {show: true}
})

syle部分

.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}

过渡的类名

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

CSS 动画

html

<div id="app">
<button @click="flag=!flag">切换</button>
<div>
<transition name="fade">
<img src="img/sun.jpg" height="260" v-show="flag" alt="" />
</transition></div>
</div>

js

new Vue({
el:"#app",data:{flag:true},
methods:{},
})

css

@keyframes fadeIn{0%{ opacity: 0; transform:scale(0.7)}90%{opacity: .8;transform:scale(1.2)}100%{opacity: 1;transform:scale(1)}
}
@keyframes fadeOut{
from{ opacity: 1; transform:scale(1)}
to{opacity: 0;transform:scale(0.7)}
}
.fade-enter-active{
animation: fadeIn .7s ease;
}
.fade-leave-active{
animation: fadeOut .2s ease;
}

  02  

自定义过渡的类名

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

html

<div id="app">
<button @click="flag=!flag">切换</button>
<div>
<transition enter-active-class="animated rotateIn" leave-active-class="animated bounceOutDown">
<img src="img/sun.jpg" height="260" v-show="flag" alt="">
</transition>
</div>
</div>

js

new Vue({
el:"#app",data:{flag:true},
})

导入其他css类库

<link rel="stylesheet" href="css/animate.min.css">

  03  

动画模式

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式

• in-out：新元素先进行过渡，完成之后当前元素过渡离开。

• out-in：当前元素先进行过渡，完成之后新元素过渡进入。

<div id="app">
<transition name="fade" mode="out-in">
<button v-if="!flag" @click="flag=!flag" :key="'off'">off</button>
<button v-if="flag" @click="flag=!flag" :key="'on'">on</button>
</transition>
</div>

new Vue({
el:"#app",data:{flag:true}
})

@keyframes fadeIn{0%{ opacity: 0;}      100%{opacity: 1;}
}
@keyframes fadeOut{
from{ opacity: 1;}
to{opacity: 0;}
}
.fade-enter-active{
animation: fadeIn .7s ease;
}
.fade-leave-active{
animation: fadeOut .2s ease;
}