脚本宝典收集整理的这篇文章主要介绍了

关于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...

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过