Vue---封装的过渡与动画

1.作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名

 

2.图示：

3.写法：

(1).元素过渡类名：

元素进入的样式：

v-enter:进入的起点

v-enter-active:进入的过程

v-ennter-to:进入的终点

元素离开的样式：

v-leave:离开的起点

v-leave-active:离开的过程

v-leave-to:离开的终点

备注：进入的起点 == 离开的终点

进入的终点 == 离开的起点

案例：

<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#example-1',
  data: {
    show: true
  }
})

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

(2).使用< transition> 包裹要过渡的元素，并配置name属性， 通过 appear设置节点在初始渲染的过渡

当有相同标签名的元素切换时，需要通过 key attribute 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。

<transition name="hello" :appear="true" >

      <h1 v-show="isShow" class="come" key="1">你好啊！</h1>

      <h1 v-show="isShow" class="come" key="2">你好啊！</h1>

 </transition>

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

 <transition-group name="hello" :appear="true" >

      <h1 v-show="isShow" class="come" key="1">你好啊！</h1>

      <h1 v-show="isShow" class="come" key="2">你好啊！</h1>

    </transition-group>

4.自定义类名过渡

我们可以通过以下 attribute 来自定义过渡类名：

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

集成第三方动画

npm官网 animate.css

安装 npm install animate.css

引入 import 'animate.css'

修改类名 根据需求添加样式

<transition-group  

   name="animate__animated animate__bounce" 

   :appear="true"

   enter-active-class="animate__heartBeat"

   leave-active-class="animate__bounceOut" >

     <h1 v-show="isShow" key="1">你好啊！</h1>

     <h1 v-show="isShow" key="2">你好啊！</h1>

   </transition-group>