Vue学习第18天——Vue中的过度与动画效果的使用与案例
目录
- 一、过度与动画
- 1、原理
- 2、标签
- 3、使用场景
- 二、使用方法
- 1、准备样式
- 2、使用`<transition>`包裹要过度的元素
- 三、过度效果案例
- 四、动画效果案例
- 五、进阶知识
- 1、有多个元素需要过度/动画
- 2、为过度/动画添加名称
- 3、页面初始化就有过度/动画效果
- 六、第三方库
一、过度与动画
1、原理
自动监测目标元素是否应用了 CSS 过渡或动画，如果是，在合适的时候给元素添加或删除 CSS 类名
2、标签
Vue 提供了 transition标签，来处理过渡以及动画
3、使用场景
只有DOM切换显示与隐藏，可以使用vue的过渡或动画
在下列情形中，可以给元素或组件添加进入/离开过渡
条件渲染(v-if)
条件展示(v-show)
动态组件
组件的根节点
二、使用方法
1、准备样式
① 过度样式
元素进入的样式
v-enter：进入的起点
v-enter-active：进入过程中
v-enter-to：进入的终点
元素离开的样式
v-leave：离开的起点
v-leave-active：离开过程中
v-leave-to：离开的终点
② 动画样式
定义动画
@keyframes 动画名 { ... }
使用动画
v-enter-active：进入过程中的动画
v-leave-active：离开过程中的动画
2、使用<transition>包裹要过度的元素
<transition>要过添加过度或动画的元素</transiton>
三、过度效果案例
需求：点击按钮显示与隐藏H3元素
<template>
<div>
<button @click="changeShow">显示与隐藏</button>
<transition>
<h3 v-show="isShow">你好，小猫咪</h3>
</transition>
</div>
</template>
<script>
export default {
name:"Demo",
data(){
return {
isShow:true
}
},
methods:{
changeShow(){
this.isShow=!this.isShow
}
}
}
</script>
<style>
/* 进入的起点，结束的重点 */
.v-enter,.v-leave-to {
transform: translateX(-100px);
}
/* 进入过程中与离开过程中 */
.v-enter-active,.v-leave-active {
transition: all 0.5s linear;
}
/* 进入的终点，离开的起点 */
.v-enter-to,.v-leave {
transform: translateX(0);
}
</style>
运行结果
四、动画效果案例
需求：点击按钮显示与隐藏H3元素
<template>
<div>
<button @click="changeShow">显示与隐藏</button>
<transition>
<h3 v-show="isShow">你好，小猫咪</h3>
</transition>
</div>
</template>
<script>
export default {
name:"Animation",
data(){
return {
isShow:true
}
},
methods:{
changeShow(){
this.isShow=!this.isShow
}
}
}
</script>
<style>
/* 进入过程的动画 */
.v-enter-active {
animation: demo 0.5s linear;
}
/* 离开过程的动画 */
.v-leave-active {
animation: demo 0.5s linear reverse;
}
/* 定义动画 */
@keyframes demo {
0% {
transform: translateX(-100%);
};
100%{
transform: translateX(0);
}
}
</style>
运行结果
五、进阶知识
1、有多个元素需要过度/动画
需要使用<transition-group>，且每个元素都要指定key值
<transition-group>
<h3 v-show="isShow" key="1">你好，小猫咪</h3>
<h3 v-show="isShow" key="2">你好，小猫咪</h3>
</transition-group>
不加key值，控制台报错，并且页面过度/动画效果不渲染
2、为过度/动画添加名称
当效果没有名称时，样式用v-表示
使用name属性为其添加名称，样式为名称-
<transition name='demo'></transition>
样式指令
.demo-enter-active, .demo-leave-active {
transition: all 0.5s linear;
}
3、页面初始化就有过度/动画效果
使用apper属性实现元素一渲染到页面就有动画效果
<transition :apper:"true"></transition>
<!-- 或者 -->
<transition apper></transition>
六、第三方库
animate.css实现动画效果
animate.css详解：链接: Vue使用第三方库实现动画效果：animate.css使用方法和教程案例