本文实例为大家分享了vue实现多个元素或多个组件之间动画的具体代码,供大家参考,具体内容如下
<强>多个元素的过渡
& lt; style>
.v-enter .v-leave-to {
透明度:0;
}
.v-enter-acitve .v-leave-active {
透明度:透明1 s;
}
& lt;/style>
& lt; div id=坝τ贸绦颉痹?
& lt; transition>
& lt; div v='显示'在你好world
& lt; div v-else>再见world</div>
& lt;/transition>
& lt;按钮@click=' handleClick祝辞切换& lt;/button>
& lt;/div>
& lt; script>
var vm=new Vue ({
埃尔:“#应用”,
数据:{
显示:真
},
方法:{
handleClick:函数(){
这一点。展示=! this.show;
}
}
})
& lt;/script>
按照之前的写法方式,渐隐渐出的效果并没有出现该有的效果,那么为什么呢?
在如果其他两个元素切换的时候,会尽量的复用dom,正是vue, dom的复用,导致动画的效果不会出现,如果想要vue不去复用dom,之前也说过,怎么做呢,给两个div不同的键值就行了
& lt; div v='显示'键='你好'祝辞你好world
& lt; div v-else关键='再见'祝辞再见world
这样就可以有个明显的动画效果,多个元素过渡动画的效果。
过渡还提供了一个模式属性,输入输出是先显示再隐藏,战斗是先隐藏再显示
<强>多个组件的过渡
& lt; style>
.v-enter .v-leave-to {
透明度:0;
}
.v-enter-acitve .v-leave-active {
过渡:透明度1 s;
}
& lt;/style>
& lt; div id=坝τ贸绦颉痹?
& lt;过渡模式=蕉贰?
& lt;孩子v='显示'祝辞& lt;/child>
& lt;一个孩子v-else> & lt;/child-one>
& lt;/transition>
& lt;按钮@click=' handleClick祝辞切换& lt;/button>
& lt;/div>
& lt; script>
Vue.component(‘孩子’,{
模板:“& lt; div> child 
