25-动画和过渡

动画和过渡

一、动画

使用css动画样式，配合vue实现动画效果。

1. 编写模板

<template><div><button @click="isShow = !isShow">显示/隐藏</button><h1 v-show="isShow">你好啊</h1></div>
</template><script>
export default {name: 'Test',data() {return {isShow: true}},
}
</script>

2. 编写动画样式

h1 {background-color: orange;
}/* 进入的动画 */
.come {animation: test 1s linear;
}/* 离开的动画 */
.go {animation: test 1s reverse;
}/* 定义动画 */
@keyframes test {from {transform: translateX(-100%);}to {transform: translateX(0px);}
}

3. 要使用vue动画的标签使用<transition>包裹

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- 使用transition包裹住要使用动画的标签 --><transition><h1 v-show="isShow">你好啊</h1></transition></div>
</template>

4. 将进入的动画样式改为.v-enter-active，离开的动画改为.v-leave-active：

/* 当vue渲染transition标签内容时，vue会自动加载v-enter-active动画样式 */
.v-enter-active {animation: test 1s linear;
}/* 当transition标签内容不展示时，vue会自动使用v-leave-active动画样式离开 */
.v-leave-active {animation: test 1s reverse;
}

总结：

如果要使用css动画配合vue，需要：

1. 要使用动画的内容使用<transition>标签包裹
2. 定义.v-enter-active入场动画、.v-leave-active离场动画

如果页面中有多个<transition>，需要有不同的动画样式，可以为<transition>指定name属性：

<transition name='hello'>
</transition>

此时定义的入场动画、离场动画的v也需要被替换为指定的名称：

.hello-enter-active {.....
}
.hello-leave-active {....
}

页面刚打开时，没有动画效果，如果需要在页面打开就直接展示动画效果，需要使用appear属性设置为true：

<transition name='hello' :appear="true"></transition>
<!-- 可以简写为 -->
<transition name='hello' appear></transition>

二、 过渡

使用vue的过渡实现动画效果。

1. 编写模板

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- 使用transition包裹 --><transition name="hello" appear><h1 v-show="isShow">你好啊</h1></transition></div>
</template><script>
export default {name: 'Test2',data() {return {isShow: true}},
}
</script>

2. 编写样式

<style scoped>
h1 {background-color: orange;
}/* 进入的起点，离开的终点 */
.hello-enter,.hello-leave-to {transform: translateX(-100%);
}/* 进入的终点，离开的起点 */
.hello-enter-to,.hello-leave {transform: translateX(0);
}.hello-enter-active,.hello-leave-active{transition: 0.5s linear;
}</style>

总结：

vue的过渡效果中：入场动画位置起点.v-enter，入场动画位置终点.v-enter-to，离场动画起点.v-leave，离场动画终点.v-leave-to。

动画的时长等需要在.v-enter-active、.v-leave-active中定义。

三、多个元素过渡

<transition>标签内只能有一个根元素，例如：

<template><transition><!-- transition内部只能有一个根元素 --><h1>hello</h1></transition>
</template>

如果需要过渡的内容是一个列表，需要使用<transition-group>，而且被包裹的元素需要有key属性：

<template><!-- 使用transition-group --><transition-group name='hello'><!-- 被包裹的标签需要有key属性	 --><h1 v-show='isShow' key='1'>hello</h1><h1 v-show='isShow' key='2'>world</h1></transition-group>
</template>

四、使用第三方库

可以使用一些已经成型的封装好了的动画库，例如Animate.css。

安装Animate：

npm i animate.css

引入animate库：

<script>
import 'animate.css'  // 引入样式库
</script>

在模板中直接库里面的样式即可，无需再自己定义样式：

name属性必须为animate__animated animate__bounce，

enter-active-class定义入场动画，leave-active-class定义离场动画，动画名称可以在animate.css官网复制

<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition appearname="animate__animated animate__bounce" enter-active-class="animate__swing"leave-active-class="animate__backOutUp"> <h1 v-show="isShow">你好啊</h1></transition></div>
</template>

先赞后看，养成习惯！！！^ _ ^ ❤️ ❤️ ❤️
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！