【Vue】第十三部分动画

本文主要是介绍【Vue】第十三部分动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

【Vue】第十三部分动画

文章目录

【Vue】第十三部分动画
13. 动画
- 13.1 Vue动画的理解
- 13.2 过渡的类名
- 13.3 几种判断类名是否存在的方法
- 13.4 多个元素过渡
- 13.5 小案例
- 13.6 集成第三方动画库
- - 13.6.1 准备工作
总结

13. 动画

13.1 Vue动画的理解

操作css的trasition或animation

vue会给目标元素添加/移除特定的class

13.2 过渡的类名

如果给transition标签添加name属性，那么name的值就是代表下面的xxx

如果没有添加name属性，默认xxx是v

<transition><p></p>
</transition>//使用的时候
.v-enter-active{}
.v-leave-active{}
-------------------------
<transition name="hello"><p></p>
</transition>//使用的时候
.hello-enter-active{}
.hello-leave-active{}

xxx-enter-active: 指定显示的transition
xxx-leave-active: 指定隐藏的transition
xxx-enter: 指定隐藏时的样式

13.3 几种判断类名是否存在的方法

 /*         分享以下几种判断类名是否存在的方法        1.可以使用Dom.classList.contains('className') 如果不考虑兼容IE 10        2.可以使用Dom.className.indexof('className') > -1         3.可以使用Dom.getAttribute('class').indexOf('className') > -1  
*/

13.4 多个元素过渡

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

<template><div><button @click="shift">点击我</button><transition-group name="bounce"><p v-show="isShow" key="1">Vue</p><p v-show="isShow" key="2">Hello</p></transition-group></div>
</template>

13.5 小案例

在这里插入图片描述

<template><div><button @click="shift">点击我</button><transition name="bounce">//appear表示一上来就执行动画效果<p v-show="isShow" appear="true">Vue</p></transition></div>
</template><script>
export default {data(){return{isShow:true}},methods:{shift(){this.isShow = !this.isShow}}
}
</script><style scoped>p{margin-top: 10px;font-size: 30px;width: 40px;height: 40px;}.bounce-enter-active{animation: goback 1s linear;}.bounce-leave-active{animation: goback 1s reverse linear;}@keyframes goback {0%{opacity: 0;transform: scale(0);}50%{opacity: 1;transform: scale(1.5);}100%{opacity: 1;transform: scale(1);}}
</style>

13.6 集成第三方动画库

13.6.1 准备工作

案例用的动画库地址
npm install animate.css --save 安装库
import 'animation.css' 引入库
animate__animated animate__bounce将这个类名放在name中
在transition标签中加入两个新的配置项enter-active-class（进入），leave-active-class（退出）

这两个配置的值到上面的网址中去找喜欢的动画把类名写到里面去，案例就随便找了2个类

<template><div><button @click="shift">点击我</button><transition-group name="animate__animated animate__bounce" appear="true" enter-active-class="rotateIn" leave-active-class="fadeOutLeft"> <p v-show="isShow" key="1">Vue</p><p v-show="isShow" key="2">Hello</p></transition-group></div>
</template>