vue 动画的理解
1、主要操作css中transition和animation;
2、vue给目标元素添加/移除特定的class;
3、过渡的相关类名
xxx-enter:指定进入之前的样式;
xxx-leave-to:指定离开后的样式;
xxx-enter-active:指定进入时的样式
xxx-leave-active:指定离开时的样式
基本过渡动画的编码
1、在目标元素外包裹<transition name=“xxx”>
2、定义 class 样式
指定过渡样式: transition
指定隐藏时的样式: opacity/其它
过渡的代码示例:
.move-enter-active {
transition: all 1s
}
.move-leave-active {
transition: all 3s
}
.move-enter, .move-leave-to {
opacity: 0;
transform: translateX(20px)
}
<transition name="move">
<p v-show="show">hello</p>
</transition>
动画的代码示例:
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}