【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>

---

总结

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