【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 准备工作
-
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>
总结
以上就是今天要讲的内容,本文介绍了动画的使用,希望对大家有帮助!