vue v-if transition不起作用
<transition name="动画名"></transition>ps:过渡的元素只能是以下之一:条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点自定义过渡动画的,记得在css中修改以下的类名:动画名-enter进入前效果动画名-enter-active进入的过渡时间和函数动画名-enter-to进入后效果动画名-leave离开前效果动画
·
<transition name="动画名"></transition>
ps:过渡的元素只能是以下之一:
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点
自定义过渡动画的,记得在css中修改以下的类名:
动画名-enter 进入前效果
动画名-enter-active 进入的过渡时间和函数
动画名-enter-to 进入后效果
动画名-leave 离开前效果
动画名-leave-active 离开的过渡时间和函数
动画名-leave-to 离开后效果
例如:
/*fade-transform*/
.fade-transform-leave-active, .fade-transform-enter-active{
transition all 0.4s
}
.fade-transform-enter{
opacity 0
transform translateX(-30px)
}
.fade-transform-leave-to{
opacity 0
transform translateX(30px)
}
<transition name="fade-transform">
<div v-if="isShow">
<div class=""></div>
</div>
<div v-else>
<span>暂无更多</span>
</div>
</transition>
这样写完全没有淡入淡出的效果,那是什么原因导致transition不起作用呢?
原因在这里:
当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们,否则 Vue为了效率只会替换相同标签内部的内容。
所以需要这样写:
<transition name="fade-transform">
<div v-if="show" key="box1">
<div class=""></div>
</div>
<div v-else key="box2">
<span>暂无更多</span>
</div>
</transition>
更多推荐
已为社区贡献4条内容
所有评论(0)