微信订餐小程序_关于vue状态过渡transition不起作用

2021-01-07 14:43 jianzhan
关于vue状态过渡transition不起作用的原因解决       这篇文章主要介绍了关于vue状态过渡transition不起作用的原因解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

请阅读以下的代码:

 transition name="fade" 
 div v-if="show" 
 div /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 /div 
 /div 
 div v-else key="box2" 
 span 暂无更多 /span 
 /div 
 /transition 

刷新运行,完美实现效果~~~~

参考资料:

补充:

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

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

改进后代码

 transition :name="slide" 
 keep-alive 
 component 
 :is="questionMap[currentQuestion.type]"
 :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="questionMap[currentQuestion.type]"
 :key="index"
 :currentQuestion="currentQuestion"
 :index="index" 
 /component 
 /keep-alive 
 /transition 

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

 div id="list-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" 
 {{ item }}
 /span 
 /transition-group 
 /div