1、Vue transition
<template>
<div>
<button @click="isShow = !isShow" >显示或隐藏</button>
<!-- :apprear=true / appear -->
<!-- 这是页面加载是默认加载一次动画的参数 -->
<transition appear>
<h1 v-show="isShow">你好吗</h1>
</transition>
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
isShow: true,
};
},
methods: {},
};
</script>
<style scope>
h1 {
background-color: red;
}
/* 进入是播放动画，要注意命名规则，这是vue所指定的 */
.v-enter-active{
animation: marquee 0.5s linear;
}
/* 退出是播放逆向动画，要注意命名规则，这是vue所指定的 */
.v-leave-active{
animation: marquee 0.5s linear reverse;
}
@keyframes marquee {
from{
transform: translateX(-100%);
}
to{
transform: translate(0px);
}
}
</style>
transition标签
<transition appear name="xxx">
appear属性：页面加载是加载动画
name属性：当页面有多个transition 并且各个样式不通是可以使用 name属性分别
/* 默认是这样的 */
.v-leave-active{
animation: marquee 0.5s linear reverse;
}
/* 指定name属性之后 */
<transition appear name="xxx">
....
</transition>
<style scope>
.xxx-enter-active{
animation: marquee 0.5s linear;
}
.xxx-leave-active{
animation: marquee 0.5s linear reverse;
}
@keyframes marquee {
from{
transform: translateX(-100%);
}
to{
transform: translate(0px);
}
}
</style>
过度效果不用keyframes实现：
<template>
<div>
<button @click="isShow = !isShow" >显示或隐藏</button>
<!-- :apprear=true / appear -->
<!-- 这是页面加载是默认加载一次动画的参数 -->
<transition name="hello" :appear="true">
<h1 v-show="isShow">你好吗</h1>
</transition>
</div>
</template>
<script>
export default {
name: "Test2",
data() {
return {
isShow:true,
};
},
methods: {},
};
</script>
<style scoped>
h1 {
background-color: red;
}
/* 元素进入时的初始动画样式 */
.hello-enter{
transform: translateX(-100%);
}
/* 元素进入完成后的最终动画样式 */
.hello-leave{
transform: translateX(0);
}
.hello-enter-active,.hello-leave-active{
/* 整个进入和退出过程的动画速率 */
transition: 0.5s linear;
}
/* 元素退出时的初始动画样式 */
.hello-enter-to{
transform: translateX(0);
}
/* 元素退出后的最终动画样式 */
.hello-leave-to{
transform: translateX(-100%);
}
</style>
简化写法：
/* 元素进入时的起点动画 和 退出时的最终位置是一致的，在一个位置 */
.hello-enter,.hello-leave-to{
transform: translateX(-100%);
}
.hello-enter-active,.hello-leave-active{
/* 整个进入和退出过程的动画速率 */
transition: 0.5s linear;
}
/* 元素退出时的起点动画 和 进入时的最终是一致的，在一个位置 */
.hello-leave,.hello-enter-to{
transform: translateX(0);
}
2、第三方动画库 animate
安装第三方库 npm i animate
引入css import 'animate.css'
因为他是css 不用 import xxx from xxx ，直接import就行
<template>
<div>
<button @click="isShow = !isShow">显示或隐藏</button>
<transition-group
name="animate__animated"
enter-active-class="animate__backInDown"
leave-active-class="animate__backOutUp"
appear
>
<h1 v-if="isShow" :key="1">你好吗</h1>
</transition-group>
<!-- 使用 :class 来动态添加类 -->
<h1 :class="test"
@mouseover="isHovered = true;"
@mouseleave="isHovered = false">
hello
</h1>
</div>
</template>
<script>
import 'animate.css'
export default {
name: "Test3",
data() {
return {
isShow: true,
isHovered: false, // 用于控制 hover 状态
};
},
computed:{
test(){
return ['animate__animated',{'animate__bounce': this.isHovered}];
}
}
};
</script>
<style scoped>
h1 {
background-color: red;
}
</style>
<transition-group
// 这样使用 name 必须时这样的
name="animate__animated"
// 这里是 动画名称animate__backInDown 从官方找各种动画
enter-active-class="animate__backInDown"
leave-active-class="animate__backOutUp"
appear
>给普通元素引用样式
<h1 class="animate__animated animate__bounce"> //后面是样式名
An animated element
</h1>动画的总结：
作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
写法：
准备好样式：
元素进入的样式：
v-enter：进入的起点
v-enter-active：进入过程中
v-enter-to：进入的终点
元素离开的样式：
v-leave：离开的起点
v-leave-active：离开过程中
v-leave-to：离开的终点
使用
<transition>包裹要过度的元素，并配置name属性,注意如果配置了appear属性的话就代表一开始挂载真实dom的时候就开启动画的效果：
<transition name="hello" appear>
<h1 v-show="isShow">你好啊！</h1>
</transition>备注：若有多个元素需要过度，则需要使用：
<transition-group>，且每个元素都要指定key值。