动画组件
transition
标签
transition
标签:Vue 的内置动画标签,配合 CSS 样式使用,实现动画效果
transition
标签只能包含一个元素,如果里面写了多个元素,则只生效第一个transition
包裹的标签需要设置v-show
/v-if
属性控制元素的显示
name
属性:用于自动生成 CSS 过渡类名。eg:name="fade"
将自动拓展为.fade-enter
… 默认为"v"
appear
属性:一开始就生效显示动画
- 进入:
.v-enter
:始状态、.v-enter-to
:末状态、.v-enter-active
:进入动画 - 离开:
.v-leave
:始状态、.v-leave-to
:末状态、.v-leave-active
:离开动画
- 如果 transition 标签没有设置 name 属性,则对应的类名为
v-XXX
如果设置了 name 属性,则对应的类名为属性值-XXX
<template>
<div id="app">
<button @click="bol = !bol">隐藏/显示</button>
<!-- 内置的组件 transition -->
<transition appear>
<!-- appear:一开始就生效进入的动画 -->
<h1 v-show="bol">子组件动画</h1>
<!-- 通过 v-show 显示标签 -->
</transition>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
bol: true,
};
},
};
</script>
<style>
/* 进入:始状态 */
.v-enter {
transform: translateX(-100%);
}
/* 进入:末状态 */
.v-enter-to {
transform: translateX(0);
}
/* 进入动画 */
.v-enter-active {
transition: 1s;
}
/* 离开:始状态 */
.v-leave {
transform: translateX(0);
}
/* 离开:末状态 */
.v-leave-to {
transform: translateX(-100%);
}
/* 离开动画 */
.v-leave-active {
transition: 1s;
}
</style>
- 也可以将
transition: 1s;
绑定到标签上
h1 {
transition: 1s;
}
/* 进入:始位置 */
.v-enter {
transform: translateX(-100%);
}
/* 进入:末位置 */
.v-enter-to {
transform: translateX(0);
}
/* 离开:始位置 */
.v-leave {
transform: translateX(0);
}
/* 离开:末位置 */
.v-leave-to {
transform: translateX(-100%);
}
<template>
<div id="app">
<button @click="bol = !bol">隐藏/显示</button>
<!-- 内置的动画组件 transition -->
<transition name="hello" appear>
<!-- appear:一开始就生效进入的动画 -->
<h1 v-show="bol">子组件动画</h1>
<!-- 通过 v-show 显示标签 -->
</transition>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
bol: true,
};
},
};
</script>
<style>
/* 进入中动画过程生效 */
.hello-enter-active {
animation: moveH 1s linear reverse;
}
/* 离开中动画过程生效 */
.hello-leave-active {
animation: moveH 1s linear;
}
/* 设置动画的关键帧 */
@keyframes moveH {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
transition-group
标签
- transition 标签只能包含 1 个元素,transition-group 标签可以包含多个元素
- transition-group 需要配合 key 属性使用,否则 Vue 为了效率只会替换相同标签内部的内容
<template>
<div id="app">
<button @click="isEditing = !isEditing">切换</button>
<transition-group appear>
<h1 v-if="isEditing" key="save">Save</h1>
<h1 v-if="!isEditing" key="edit">Edit</h1>
</transition-group>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isEditing: true,
};
},
};
</script>
<style>
h1 {
transition: 0.5s;
position: absolute;
}
.v-leave {
opacity: 1;
}
.v-leave-to {
opacity: 0;
}
.v-enter {
opacity: 0;
}
.v-enter-to {
opacity: 1;
}
</style>
也可以通过给同一个元素的 key
设置不同的状态来代替 v-if
和 v-else
,上面的例子可以重写为:
<transition>
<h1 :key="isEditing">
{{ isEditing ? "Save" : "Edit" }}
</h1>
</transition>
动画库的使用
- 下载:
npm install animate.css --save
- 引入:
import 'animate.css';
- 给指定的 transition 标签设置 name 属性
animate_animate
、animate_自定义名称
<template>
<div id="app">
<button @click="bol = !bol">隐藏 / 显示</button>
<transition
appear
name="animate__animated animate__bounce"
enter-active-class="animate__bounceIn"
leave-active-class="animate__bounceOut"
>
<h1 v-show="bol">动画库的使用</h1>
</transition>
</div>
</template>
<script>
import "animate.css"; // 引入动画库
export default {
name: "App",
data() {
return {
bol: true,
};
},
};
</script>