关于vue状态过渡transition不起作⽤的原因解决
总所周知，vue中的transition标签可以⽅便得进⾏动画过渡，使⽤的⽅法也很简单。
<transition name="你要的名字">
过渡的元素...
</transition>
这⾥需要主要⼀点的是：过渡的元素只能是以下之⼀：
条件渲染 (使⽤ v-if)
条件展⽰ (使⽤ v-show)
动态组件
组件根节点
常⽤的过渡名称有fade等
你可以这样⽤
<transition name="fade">
过渡的元素...
</transition>
实现的效果就是淡⼊淡出。
如果需要⾃定义过渡动画的，记得在css中修改以下的类名：
你要的名字-enter            进⼊前效果
你要的名字-enter-active    进⼊的过渡时间和函数
你要的名字-enter-to        进⼊后效果
你要的名字-leave            离开前效果
你要的名字-leave-active    离开的过渡时间和函数
你要的名字-leave-to        离开后效果
写到这⾥相信⼤家都已经会简单地使⽤transition了。
请阅读以下的代码：
<transition name="fade">
<div v-if="show">
<div class="item-box"></div>
</div>
<div v-else>
<span>暂⽆更多</span>
</div>
</transition>
结果是完全没有淡⼊淡出的效果，那这是什么原因导致transition不起作⽤呢？
原因在这⾥：
当有相同标签名的元素切换时，需要通过 key 特性设置唯⼀的值来标记以让 Vue 区分它们，否则 Vue为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是⼀个更好的实践。
所以需要这样写：
<transition name="fade">
<div v-if="show" key="box1">
<div class="item-box"></div>
</div>
<div v-else key="box2">
<span>暂⽆更多</span>
</div>
</transition>
刷新运⾏，完美实现效果～～～～
补充：
问题1：不同类型的组件之间切换，有过渡效果，⽽相同组件(不同内容)切换则没有过渡效果
vue官⽹的描述：当有相同标签名的元素切换时，需要通过 key 特性设置唯⼀的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在组件中的多个元素设置 key 是⼀个更好的实践。
改进后代码
<transition :name="slide">
<keep-alive>
<component
:is="pe]"
:key="index"
:currentQuestion="currentQuestion"
:index="index">
</component>
</keep-alive>
</transition>
给组件添加了key=”index”了之后，不管任何类型都有过渡效果了，因为此时vue将每⼀个组件区分为不同的组件
问题2：前⼀个组件滑动出去后，后⼀个组件没有滑动效果，⽽是直接显⽰了
过渡模式有⼀个问题：⼀个离开过渡的时候另⼀个开始进⼊过渡。这是的默认⾏为 - 进⼊和离开同时发⽣，因为这样也导致了两个卡⽚的过渡不太复合需求，我们需要的是⼀个先离开后另⼀个再进⼊。
同时⽣效的进⼊和离开的过渡不能满⾜所有要求，所以 Vue 提供了过渡模式
in-out：新元素先进⾏过渡，完成之后当前元素过渡离开。
out-in：当前元素先进⾏过渡，完成之后新元素过渡进⼊。
因此我们需要在transition标签中添加mode来达成效果：
<transition :name="slide" mode="out-in">
<keep-alive>
<component
:is="pe]"
:key="index"
:currentQuestion="currentQuestion"
:index="index">
</component>
</keep-alive>
</transition>
如果要使⽤列表排序的话，需要使⽤transition-group，下⾯是⼀个简单的例⼦
<div id="list-demo" class="demo">
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
transition用法搭配
</transition-group>
</div>
new Vue({
el: '#list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
randomIndex: function () {
return Math.floor(Math.random() * this.items.length)
},
add: function () {
this.items.splice(this.randomIndex(), 0, Num++)
},
remove: function () {
this.items.splice(this.randomIndex(), 1)
},
}
})
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。