动画类总结

transform（动画具体动作，可设置动作原点）

.active {
transition: all 5s;
transform: translate(150px, 200px) rotate(45deg) scale(1.5);
}
可以配合transition使用，在vue动态添加进类名

transition（动画时间，动作等属性设置）

transition-property 属性
transition-duration 时间
transition-timing-function 曲线
transition-delay 延时

animation（配合动画帧使用，可通过动态类名触发）

@keyframes myfirst {
0% {
/* background: red; /
transform: translate(0px);
}
50% {
/ background: yellow; /
transform: translate(300px);
}
100% {
/ background: red; */
transform: translate(0px);
}
}
.leftActive {
animation: myfirst 5s infinite;
}

vue translation组件

使用transition完成任何元素进入/离开的过渡组件需要满足下列条件
条件渲染（v-if）
条件展示（v-show）
动态组件
组件根节点

中只有name属性，不可添加其他标签属性
中只能有一个子元素并且该子元素需要有v-show或者v-if来控制是否显示
如果需要多个子元素

中的name属性用于 替换 vue钩子函数中的类名v-
v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在transition/animation完成之后移除。
v-leave:定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除。