在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這個屬性可自定義時長