【Vue】第十三部分 动画

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

【Vue】第十三部分 动画

---

---

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 准备工作

1. 案例用的动画库地址

2. npm install animate.css --save 安装库

3. import 'animation.css' 引入库

4. animate__animated animate__bounce将这个类名放在name中

5. 在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>

---

总结

以上就是今天要讲的内容，本文介绍了动画的使用，希望对大家有帮助！

这篇关于【Vue】第十三部分 动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---