10. 过渡动画

1.给想要实现过渡效果的元素外层加transition组件

<transition name="fade">
<p v-show="show">...</p>
</transition>

根据上图可知：

vue会自动生成四个class，分别是

fade-enter,fade-enter-active,fade-leave,fade-leave-active

其中动画效果要写在激活阶段，也就是

.fade-enter-active,.fade-leave-active{
transition: all .5s;
}

.fade-enter, .fade-leave-active{ // 注意，leave-active阶段
opcity: 0
}

　　

在切换动画效果时,transition是新的先进来，旧的后出去，in-out模式

<transition name="fade" mode="out-in"></transition> //旧的先出去，新的后进来

 

在transition内，相同元素if else切换，不会产生动画效果，要想实现动画效果，需要加key来区分

<transition name="fade" mode="out-in">
<p v-if="show" key="1">...</p>
<p v-else key="2">...</p>
</transition>

 

2. js动画效果实现

可以结合jQuery+vuejs钩子来实现

https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-钩子