xieyezi

过渡

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具：

  • 在 CSS 过渡和动画中自动应用 class
  • 可以配合使用第三方 CSS 动画库，如 Animate.css
  • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
  • 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

注： 后面两种工具涉及到太多 js 的操作，一般来说很消耗内存，故不太多使用.

单元素/组件的过渡

Vue 封装了 transition 的封装组件,可以为任何元素和组件添加进入/离开过渡

  • 条件渲染(v-if)
  • 条件展示(v-show)
  • 动态组件
  • 组件根节点

使用方法： template 部分：

<template lang="html">
 <div class="">
     <button type="button" name="button" v-on:click="showHide">过渡</button>
     <transition name="fade">
       <p v-show="show">哈哈</p>
     </transition>
 </div>
</template>

script 部分：

<script>
  export default {
    name:"anim",
    data(){
      return {
        show:true
      }
    },
    methods:{
      showHide(){
        this.show=!this.show;
      }
    }
  }
</script>

style 部分：

.fade-enter{
opacity: 0;
}
.fade-enter-active{
  transition: opacity .5s;
}
.fade-enter-to{
  opacity: 1;
}
.fade-leave-enter{
  opacity: 1;
}
.fade-leave-active{
  transition: opacity .5s;
}
.fade-leave-to{
  opacity: 0;
}

总结：将元素放置在 transition 标签下,为 transition 标签赋值一个 name 属性,然后在样式表里面实现动画. 形如：

 <transition name="my transition">

过渡的类名

当插入或删除包含在 transition 组件中的元素时,Vue 将会自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. 在进入/离开的过渡中,有 6 个 class 切换：

  • v-enter:定义进入过渡的开始状态
  • v-enter-active:执行过程中
  • v-enter-to:结束动画
  • v-leave:定义离开过渡的开始状态
  • v-leave-active:离开过程
  • v-leave-to:离开结束

过渡总共有 6 个状态,进入有 3 个,退出有 3 个. 在使用时 6 个都应使用,形如：

.fade-enter{
opacity: 0;
}
.fade-enter-active{
  transition: opacity .5s;
}
.fade-enter-to{
  opacity: 1;
}
.fade-leave-enter{
  opacity: 1;
}
.fade-leave-active{
  transition: opacity .5s;
}
.fade-leave-to{
  opacity: 0;
}

css 动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。 在使用动画时,通常只需要控制 enter-active 和 leave-active 两个过程即可. 例如： template 部分：

<template lang="html">
 <div class="">
     <button type="button" name="button" v-on:click="showHideAnim">动画</button>
     <transition name="hello">
       <p v-show="showAnim">嘿嘿</p>
     </transition>
 </div>
</template>

script 部分：

<script>
  export default {
    name:"anim",
    data(){
      return {
        show:true
      }
    },
    methods:{
      showHideAnim(){
        this.showAnim=!this.showAnim;
      }
    }
  }
</script>

style 部分：

.hello-enter-active{
  animation: bounce-in 1s ease;
}
.hello-leave-active{
  animation: bounce-in 1s ease reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

引入第三方 css 动画库

可以在 index.html 引入外部 css 动画库,如Animate.

 <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

然后在组件中可以直接使用：

<transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
      <p v-show="libs">呵呵</p>
</transition>