关于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>
刷新运行,完美实现效果~~~~
参考资料:https://cn.vuejs.org/v2/guide/transitions.html
补充:
问题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" 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-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, 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: all 1s; } .list-enter, .list-leave-to /* .list-leave-active for below version 2.1.8 */ { opacity: 0; transform: translateY(30px); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- 关于面试经常被问到的socket的TIME_WAIT状态的原因及解决办法和避免的办法
- 关于面试经常被问到的socket的TIME_WAIT状态的原因及解决办法和避免的办法
- 关于在IOS7上修改状态栏无用的原因及解决办法
- 关于DLL工程中存在全局变量可能导致MFC内存泄露误报的原因分析及解决办法
- span设置text-indent不起作用的原因及解决方法
- 状态栏始终处于加载状态问题原因及解决方法
- 关于struts2中使用OGNL表达式取值,取不到值的原因及解决方法
- 关于iPhone5耳机一个响解决办法(部分原因)
- CLOSE_WAIT状态的原因与解决方法
- vue div backgroundSize 不起作用的解决办法
- "此页的状态信息无效,可能已损坏"的原因和解决方法
- 关于标准c++ 利用clock()函数计算时间为负值原因及解决
- 处于CLOSE_WAIT和TIME_WAIT状态连接的原因及解决
- 关于Idea的全局搜索 Ctrl+Shift+F 快捷键没反应的原因及解决方法
- 关于XmlTextWriter的 "处于状态 Epilog 的标记 StartElement 将导致无效的 XML 文档"报错原因
- 关于获取DIV内部内容报错的原因分析及解决办法
- android app -- 关于listview的几种用法(复用,不复用,半复用)解决item状态改变的问题
- CLOSE_WAIT状态的原因与解决方法
- 关于Android Force Close 出现的原因 以及解决方法
- Android 关于“NetworkOnMainThreadException”出错提示的原因及解决办法