Vue2基础篇-32-过度与动画

1. 简介

作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

写法：

1. 准备好样式：

   • 元素进入的样式：
     1. v-enter：进入的起点
     2. v-enter-active：进入过程中
     3. v-enter-to：进入的终点
   • 元素离开的样式：
     1. v-leave：离开的起点
     2. v-leave-active：离开过程中
     3. v-leave-to：离开的终点

2. 使用<transition>包裹要过度的元素，并配置name属性：

   <transition name="hello"><h1 v-show="isShow">你好啊！</h1>
   </transition>
   

3. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

2. demo

demo1

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- 动画效果需要使用vue提供的transition包裹,但是样式的名字必须使用它自带的 .v-enter-active 和.v-leave-active 当然你也可以自己取名字,比如取名字为test01,那么样式名字变成 .test01-enter-active 和.test01-leave-active--><transition name="test01"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name: "Test",data() {return {isShow: true,};},
};
</script><style scoped>
h1 {background-color: orange;
}/* 来 linear表示是否匀速 */
.test01-enter-active {animation: atDingDong 1s linear;
}/* 走，然后反转 */
.test01-leave-active {animation: atDingDong 1s linear reverse;
}/* 动画就得定义一个 @keyframes  */
@keyframes atDingDong {/* 来的动画 */from {transform: translateX(-100%);}to {transform: translateX(0px);}
}
</style>

demo2

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- 使用过渡效果实现 --><transition name="test02"><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name: "Test2",data() {return {isShow: true,};},
};
</script><style scoped>
h1 {background-color: orange;
}/* 进入的起点,离开的终点 */
.test02-enter,
.test02-leave-to {transform: translateX(-100%);
}/* 进入的终点,离开的起点 */
.test02-enter-to,
.test02-leave {transform: translateX(0);
}/* 中间过渡的效果 */
.test02-enter-active,
.test02-leave-active {transition: 0.5s linear;
}/* vue给我们在起点和终点各提供了三个样式进入的起点: .test01-enter,
进入的终点: .test01-enter-to
进入期间的效果(时间/是否加速): .test01-enter-active离开的起点: .test01-leave,
离开的终点: .test01-leave-to
离开期间的效果(时间/是否加速): .test01-leave-active*/
</style>

demo3

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- 如果是列表 --><transition-group name="test03"><h1 v-show="isShow" key="1">你好啊1111</h1><h1 v-show="isShow" key="2">你好啊2222</h1></transition-group></div>
</template><script>
export default {name: "Test3",data() {return {isShow: true,};},
};
</script><style scoped>
h1 {background-color: orange;
}/* 进入的起点,离开的终点 */
.test03-enter,
.test03-leave-to {transform: translateX(-100%);
}/* 进入的终点,离开的起点 */
.test03-enter-to,
.test03-leave {transform: translateX(0);
}/* 中间过渡的效果 */
.test03-enter-active,
.test03-leave-active {transition: 0.5s linear;
}/* vue给我们在起点和终点各提供了三个样式进入的起点: .test01-enter,
进入的终点: .test01-enter-to
进入期间的效果(时间/是否加速): .test01-enter-active离开的起点: .test01-leave,
离开的终点: .test01-leave-to
离开期间的效果(时间/是否加速): .test01-leave-active*/
</style>

demo4

<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition-groupappearname="animate__animated animate__bounce"enter-active-class="animate__backInDown"leave-active-class="animate__backOutUp"><h1 v-show="isShow" key="1">你好啊1111</h1><h1 v-show="isShow" key="2">你好啊2222</h1></transition-group></div>
</template><script>
/* 由于引入的是样式,不需要跟js那样 import xxx from xxx 这种*/
import "animate.css";export default {name: "Test5",data() {return {isShow: true,};},
};
</script><style scoped>
h1 {background-color: orange;
}
</style>