在这种情况下可以用<transition>组件上的duration属性定制一个显性的过渡效果持续时间 (以毫秒计)
下面的代码意味着元素在进入enter和离开leave时,持续时间都为1s,而无论在样式中它们的设置值为多少
<transition :duration="1000">...</transition>
也可以分别定制进入和移出的持续时间
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
比如,下面的代码中,进入和移出的效果都为animate.css里面的shake效果,但持续时间分别是0.5s和1s
<div > <button v-on:click="show = !show">Toggle</button> <transition :duration="{ enter: 500, leave: 1000 }" name="xxx" enter-active-class="animated shake" leave-active-class="animated shake"> <p v-if="show">小火柴的蓝色理想</p> </transition> </div> <script> new Vue({ el: '#demo', data: { show: true } }) </script>
一般地,在Vue中满足下列任意一个过渡条件,即可添加过渡效果
常见的条件是使用条件渲染,使用v-if
<style> .fade-enter,.fade-leave-to{ opacity:0; } .fade-enter-active,.fade-leave-active{ transition:opacity 1s; } </style> <div > <button v-on:click="show = !show">Toggle</button> <transition name="fade"> <p v-if="show">蓝色理想</p> </transition> </div> <script> new Vue({ el: '#demo', data: { show: true } }) </script>
使用条件展示,即使用v-show时,也可以添加过渡效果
<div > <button v-on:click="show = !show">Toggle</button> <transition name="fade"> <p v-show="show">蓝色理想</p> </transition> </div>
使用is属性实现的动态组件,可以添加过渡效果
<div > <button v-on:click="show = !show">Toggle</button> <transition name="fade"> <component :is="view"></component> </transition> </div> <script> new Vue({ el: '#demo', components:{ 'home':{template:'<div>蓝色理想</div>'} }, data: { show: true, }, computed:{ view(){ return this.show ? 'home' : ''; } } })
更多关于Vue动画效果的文章请点击下面的相关链接