样例解析
代码语言：javascript复制<template>
<div class="hello">
<button @click="show1 = !show1">show</button>
<!-- 使用transition标签，会在动画的对应阶段给包裹的元素添加、删除相应的样式 -->
<!-- appear 使得元素在创建时就使用动画显示 -->
<transition appear>
<h1 v-show="show1">Hello World</h1>
</transition>
<button @click="show2 = !show2">show</button>
<!-- 控制多个元素动画，必须使用transition-group标签，且每个元素必须包含key -->
<!-- 可用于彼此互斥的多个元素动画控制 -->
<!-- 通过name属性使用命名前缀的动画样式 -->
<transition-group name="my-tran">
<h1 v-show="show2" key="1">Hello World1</h1>
<h1 v-show="!show2" key="2">Hello World2</h1>
</transition-group>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
show1: true,
show2: true
}
}
}
</script>
<style scoped>
/*默认动画*/
/*以过度实现*/
/*进入起点（一瞬间，动画的第一帧）、离开终点激活*/
.v-enter, .v-leave-to {
transform: translateX(-100%);
}
/*进入终点、离开起点（一瞬间，动画的第一帧）激活*/
.v-enter-to, .v-leave {
transform: translateX(0);
}
/*进入过程中、离开过程中激活*/
.v-enter-active, .v-leave-active {
transition: 1s;
}
/*命名动画，样式名前缀v改为对应transition.name*/
/*以动画实现*/
/*进入过程中激活*/
.my-tran-enter-active {
animation: my-ani 0.5s;
}
/*离开过程中激活*/
.my-tran-leave-active {
animation: my-ani 0.5s reverse;
}
@keyframes my-ani {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0px);
}
}
</style>动画库
Animate.css
- 安装
npm i animate.css
- 使用
<template>
<button @click="show3 = !show3">show</button>
<!-- 转换名固定写animate__animated animate__bounce,作为动画样式的前缀-->
<!-- 动画对应阶段使用对应属性(enter-active-class...)指定的名称作为动画样式的后缀 -->
<transition
name="animate__animated animate__bounce"
appear
enter-active-class="animate__backInDown"
leave-active-class="animate__backOutDown"
>
<h1 v-show="show3">Hello World</h1>
</transition>
</div>
</template>
<script>
import 'animate.css'
</script>
