代码展示
动画由关键帧定义
@keyframes myAnimation{
from {
transform:translateX(-100%);
}
to{
transform:translateX(0)
}
过渡由transition定义
transition:0.5s linear;
group可以使得多个元素使用同一过渡和动画,需要设置key
appear
是否在刷新时从起点运行过渡和动画
enter-active-class
1.v-enter-active
2.v-enter
3.v-enter-to
name-enter/leave-active
name-enter-0/to
v-enter/leave-active
关键点说明
过渡是一个阶段性过程,可以简单将其分为 enter 和 leave
如果存在多个过渡效果,可以使用 name 进行区分
如果需要设定在刷新时从起点运行过渡和动画可以使用 apper 属性
标签与属性与类选择器之间的关系
-
标签和name属性是一体、其中active是确定选择那种行为
-
name-enter/leave name-enter/leave-to
-
则是描述选择行为中的两种状态
-
中间的部分由计算机自动计算
-
-
此外enter/leave-active-class 是封装了不同的行为
-
而name属性则是两种行为的依赖
例子
军训时,你因为偷偷撩妹被教官惩罚了。你站在一个初始位置(enter)，老师跟你说，当我说开始(active)的时候你可以选择蛙跳一百米运动和深蹲一百米运动,直到我说结束点(to)。
这个时候,有个同学跟你一样，也被惩罚了。这个时候教官就分别给你们起了一个名字(name)。当然,教官还提供了第三方扩展惩罚,就是一百米俯卧撑移动。
三个核心点
- 触发
动画是通过是否有该属性从而实现动画的开始,transition则是依赖于状态的改变(css)
-
行为
-
状态
1.组件标签
<transition> </transition>、
<transition-group> </transition-group>
enter和leave 只限定了插入和删除
2.属性
1.name
、
2.appear
、
3.enter-active-class
、
4.leave-active-class
3.类选择器
v-enter-active
v-leave-active
name-enter-active
name-leave-active
name-enter
name-enter-to
name-leave
name-leave-to
