transition过渡&动画
# transition过渡&动画
# 使用
需要设置动画的元素或组件要在外边包裹一个<transition>
标签,设置自定义的name
,vue会根据元素的切换(进入/离开)过程添加相应的css类名,你可以自由地使用css类名来设置css过渡&动画。
# 过渡的类名
在进入/离开的过渡中,会有 6 个 class 切换。
各类名的生命周期
进入
v-enter
只存在于第一帧v-enter-active
第一帧到最后一帧,结束后移除v-enter-to
第二帧到最后一帧,结束后移除
离开
v-leave
只存在于第一帧v-leave-active
第一帧到最后一帧,结束后移除v-leave-to
第二帧到最后一帧,结束后移除
如果你使用一个没有name
的<transition>
,则 v-
是这些类名的默认前缀。如果你使用了name="fade"
,那么 v-
前缀会替换为 fade-
。
# css过渡 demo
See the Pen vue的过渡动画 by 败北·杨 (@败北·杨) on CodePen.
# css动画 demo
See the Pen vue的动画 by 败北·杨 (@败北·杨) on CodePen.
# 组件中使用的示例
<template>
<transition name="slide">
<div class="add-song">
...
</div>
</transition>
<template>
1
2
3
4
5
6
7
2
3
4
5
6
7
.add-song
&.slide-enter-active, &.slide-leave-active
transition: all 0.3s
&.slide-enter, &.slide-leave-to
transform: translate3d(100%, 0, 0)
1
2
3
4
5
2
3
4
5