vue动画
补充vue动画:在vue中,显示隐藏,创建移除,一个元素或者一个组件的时候,可以通过transition实现动画。6个状态对应6个类名:进入(显示,创建)v-enter-from 进入前 (vue2.0 v-enter)v-enter-active 进入中v-enter-to 进入后离开(隐藏,移除)v-leave-from 进入前 (vue2.0 v-leave)v-leave-active 进
·
补充vue动画:在vue中,显示隐藏,创建移除,一个元素或者一个组件的时候,可以通过transition实现动画。
6个状态对应6个类名:
- 进入(显示,创建)
- v-enter-from 进入前 (vue2.0 v-enter)
- v-enter-active 进入中
- v-enter-to 进入后
- 离开(隐藏,移除)
- v-leave-from 进入前 (vue2.0 v-leave)
- v-leave-active 进入中
- v-leave-to 进入后
多个transition使用不同动画,可以添加nam属性,name属性的值替换v即可。
如果元素或组件离开,完成一个淡入淡出效果
并且,6个状态都需要设置在css中哈~,例如:
<transition name="fade">
<p v-if="show">100</p>
</transition>
// 如果没有设置name为fade,则就写成v-enter-from等等,如果设置了name,就写设置的name
.fade-enter-from {
opacity: 0
}
.fade-enter-active {
transition: all 2s;
}
.fade-enter-to {
opcaity: 1
}
.fade-leave-from {
opacity: 1
}
.fade-leave-active {
transition: all 2s;
}
.fade-leave-to {
opcaity: 0
}
更多推荐
已为社区贡献3条内容
所有评论(0)