微客导航 » 文章资讯 » 关于vue状态过渡transition不起作用的原因解决

关于vue状态过渡transition不起作用的原因解决

2023-08-24 20:12:05 180

总所周知，vue中的transition标签可以方便得进行动画过渡，使用的方法也很简单。


过渡的元素...

这里需要主要一点的是：过渡的元素只能是以下之一：

条件渲染(使用v-if)
条件展示(使用v-show)
动态组件
组件根节点

常用的过渡名称有fade等

你可以这样用


过渡的元素...

实现的效果就是淡入淡出。

如果需要自定义过渡动画的，记得在css中修改以下的类名：

你要的名字-enter 进入前效果
你要的名字-enter-active 进入的过渡时间和函数
你要的名字-enter-to 进入后效果
你要的名字-leave 离开前效果
你要的名字-leave-active 离开的过渡时间和函数
你要的名字-leave-to 离开后效果

写到这里相信大家都已经会简单地使用transition了。

请阅读以下的代码：

暂无更多

结果是完全没有淡入淡出的效果，那这是什么原因导致transition不起作用呢？

原因在这里：

当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让Vue区分它们，否则Vue为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在组件中的多个元素设置key是一个更好的实践。

所以需要这样写：

暂无更多

刷新运行，完美实现效果～～～～

参考资料：https://cn.vuejs.org/v2/guide/transitions.html

补充：

问题1：不同类型的组件之间切换，有过渡效果，而相同组件(不同内容)切换则没有过渡效果

vue官网的描述：当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让Vue区分它们，否则Vue为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在组件中的多个元素设置key是一个更好的实践。

改进后代码

给组件添加了key=”index”了之后，不管任何类型都有过渡效果了，因为此时vue将每一个组件区分为不同的组件

问题2：前一个组件滑动出去后，后一个组件没有滑动效果，而是直接显示了

过渡模式有一个问题：一个离开过渡的时候另一个开始进入过渡。这是的默认行为-进入和离开同时发生，因为这样也导致了两个卡片的过渡不太复合需求，我们需要的是一个先离开后另一个再进入。

同时生效的进入和离开的过渡不能满足所有要求，所以Vue提供了过渡模式

in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

因此我们需要在transition标签中添加mode来达成效果：

如果要使用列表排序的话，需要使用transition-group，下面是一个简单的例子


Add
Remove


{{item}}

newVue({
el:'#list-demo',
data:{
items:[1,2,3,4,5,6,7,8,9],
nextNum:10
},
methods:{
randomIndex:function(){
returnMath.floor(Math.random()*this.items.length)
},
add:function(){
this.items.splice(this.randomIndex(),0,this.nextNum++)
},
remove:function(){
this.items.splice(this.randomIndex(),1)
},
}
})

.list-item{
display:inline-block;
margin-right:10px;
}
.list-enter-active,.list-leave-active{
transition:all1s;
}
.list-enter,.list-leave-to
/*.list-leave-activeforbelowversion2.1.8*/{
opacity:0;
transform:translateY(30px);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

关于vue状态过渡transition不起作用的原因解决

热门推荐

随机推荐