在vue中同时使用过渡和动画

在上次的动画中，在显示和隐藏有动画效果，但是，刷新页面的时候，第一次的显示没有动画效果

需求：刷新页面的时候也有动画效果

<transition
　　name='fade'
　　appear
　　enter-active-class='animated swing'
　　leave-active-class='animated shake'
　　appear-active-class='animated swing'
>
　　<div v-if='show'>hello world</div>
</transition>

在transition里面加一个标签，appear，指定要使用appear,appear-active-class='animated swing'指定第一次出现的时候跟显示的时候效果一样

 

需求：在执行动画的时候，加一个过渡效果，怎么弄

将过渡动画也加上去

<style>
　　.fade-enter,.fade-leave-to{
　　　　opacity: 0;
　　}
　　.fade-enter-active,.fade-leave-active{
　　　　transition: opacity 5s;
　　}
</style>
<div id='app'>
　　<transition
　　　　name='fade'
　　　　appear
　　　　enter-active-class='animated swing fade-enter-active'
　　　　leave-active-class='animated shake fade-leave-active'
　　　　appear-active-class='animated swing'
　　>
　　　　<div v-if='show'>hello world</div>
　　</transition>
　　<button @click='handleClick'>切换</button>
</div>
<script>
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　}
　　}
})
</script>

这个时候，浏览器似乎并不知道使用的是animate的时长，还是transition的时长，要整体使用transition的时长怎么做

<transition
　　name='fade'
　　appear
　　type='transition'
　　enter-active-class='animated swing fade-enter-active'
　　leave-active-class='animated shake fade-leave-active'
　　appear-active-class='animated swing'
>
　　<div v-if='show'>hello world</div>
</transition>

在transition里面加个type属性，指定为transition，就可以

 

自定义时长

<transition
　　:duration='{enter:5000,leave:10000}'
　　name='fade'
　　appear
　　enter-active-class='animated swing fade-enter-active'
　　leave-active-class='animated shake fade-leave-active'
　　appear-active-class='animated swing'
>
　　<div v-if='show'>hello world</div>
</transition>

duration这个属性可自定义时长