vue提供 <transition> 和 <transition-group> 标签，管理动画。
transition
<transition> 不会渲染成真实元素，只能包含一个子元素。
常规形式
isShow: true
<button @click="isShow = !isShow">显示/隐藏</button>
<transition name="xxx">
<!-- v-show 和 v-if 效果一样 -->
<h1 v-show="isShow">动画元素</h1>
</transition>
- 点击按钮，
<h1>隐藏，自动添加两个类样式xxx-leave-active、xxx-leave-to -
<h1>完全隐藏完毕，即动画执行完毕，又会移除这两个类 - 再次点击按钮，
<h1>显示，自动添加两个类样式xxx-enter-active、xxx-enter-to -
<h1>完全显示完毕，即动画执行完毕，又会移除这两个类
<style>
/* active 通常是设置过渡中的效果、时间、曲线 */
.xxx-leave-active, .xxx-enter-active {
transition: all 2s linear;
}
/* 进入开始状态 */
.xxx-enter {
opacity: 0;
}
/* 进入结束状态 */
.xxx-enter-to {
opacity: 1;
}
/* 进入离开状态 */
.xxx-leave {
opacity: 1;
}
/* 进入离开状态 */
.xxx-leave-to {
opacity: 0;
}
</style>
简写形式
<h1>默认opacity: 1，那么只需要设置opacity: 0的情况
/* active 通常是设置过渡中的效果、时间、曲线 */
.xxx-leave-active, .xxx-enter-active {
transition: all 2s linear;
}
.xxx-enter, .xxx-leave-to {
opacity: 0;
}
自定义CSS动画
比较推荐 设置CSS动画的方式实现
- 注册动画
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
- 设置CSS类
/* active 通常是设置过渡中的效果、时间、曲线 */
.xxx-enter-active {
animation: bounce-in 2s linear;
}
.xxx-leave-active {
animation: bounce-out 2s linear;
}
配合CSS库
配合第三方CSS动画库时，就不能使用name属性了，因为需要自定义类名。
<transition>注入类名的属性：enter-class、enter-to-class、enter-active-class ...
第三方CSS动画库：animate.css
<transition
enter-active-class="animated tada"
leave-active-class="animated bounceOut">
搭配多个元素
<transition>只能有一个子元素，但可以通过 v-if 控制子元素只有一个。
<transition name="xxx" mode="out-in">
<h1 v-if="isShow" key="1">动画元素-1</h1>
<h1 v-else key="2">动画元素-2</h1>
</transition>
-
key的作用：如果子元素是同一种类型的标签，Vue为了提高渲染性能，会复用同一个标签，这就会导致动画无效，只有生硬的切换显示。
key在Vue的DOM Diff过程中作为唯一标记，只有key值相同才会复用。 -
mode：过渡模式，控制谁先执行。默认两个子元素的动画会同时执行，非常混乱。-
in-out新元素先过渡，完成之后，当前元素过渡离开 -
out-in当前元素先动画过渡，完成之后，新元素过渡进入
-
JS控制动画
<transition>还提供了勾子函数，控制元素的状态
before-enter、before-leave、before-appear
enter、leave、appear
after-enter、after-leave、after-appear
enter-cancelled
leave-cancelled (v-show only)
appear-cancelled
第三方JS动画库velocity.min.js
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
:css="false"
>
<h1 style="position:absolute;">动画元素</h1>
</transition>
<script>
beforeEnter(el, done) {
// el 表示当前动画作用的元素
// done 动画立即完成，所以应该等待动画完成后在调用done
}
enter(el, done) {
Veloctity(el,
{ right: '200px' },
{ duration: 1000 },
{ complete: done }
);
}
leave(el, done) {
Veloctity(el,
{ right: '-200px' },
{ duration: 1000 },
{ complete: done }
);
}
</script>
:css="false" 表示禁用CSS的影响（防止一些隐患），只是用JS动画
初始渲染的过渡
appear 初始渲染时立即使用过渡，比如刷新页面时，首次动画就要执行
<transition
appear
appear-active-class="animated bounceOut"
>
对应勾子函数：before-appear、appear、after-appear、appear-cancelled(取消动画)
transition-group
<transition-group> 动画组，支持设置一组子元素的动画效果。
它会渲染成一个真实元素，标签类型通过tag属性控制，默认是<span>
动画组内的子元素必须设置唯一的key，动画才能正常工作。
- 事件与
<transition>相同 - 属性除了
mode，其他的与<transition>相同，另外还有tag、move-class
<button @click="handleAdd">添 加</button>
<transition-group tag="ul" name="xxx">
<li v-for="(item, index) in dataList" :key="item.id">
<label>{{item.label}}</label>
<button @click="handleDelete(index)">删 除</button>
</li>
</transition-group>
