过度和动画及animate.css动画库

过度和动画

这篇文章介绍Vue的过渡与动画，主要是用到组件transition。

我们在CSS 中也学习了过渡，Vue中的过渡和CSS中的过渡效果一样。Vue中在插入、更新或移除 DOM 的过程中就可以使用过渡。过渡分为单元过渡和多元素过渡。

单元素过渡

在过渡的实现过程中，从开始过渡到结束过渡，总共实现会有 6 个 class 切换：

• v-enter：定义上半场过渡的初始状态；在过渡开始前被添加，在过渡开始时会被移除
• v-enter-to：定义上半场过渡的结束状态；在过渡开始时被添加，在过渡完成时会被移除
• v-enter-active：这里包含了上面的v-enter、v-enter-to两个时间段，在这里可以对上半场过渡定 义过渡时间、曲线等
• v-leave：定义下半场过渡的初始状态；在过渡开始前被添加，在过渡开始时会被移除
• v-leave-to：定义下半场过渡的结束状态；在过渡开始时被添加，在过渡完成时会被移除
• v-leave-active：这里包含了上面的v-leave、v-leave-to两个时间段，在这里可以对下半场过渡定义过渡时间、曲线等

这六个 class 都是作用在 transition组件上的，如果transition组件没有定义name属性，则v-这个就是前缀，如果定义了name属性，则v-被替换。

通过CSS 动画完成过渡

<style>
    .v-enter-active {
        transition: all .3s ease;
    }
        
    .v-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
        
    .v-enter,
    .v-leave-to {
        transform: translateX(10px);
        opacity: 0;
    }
</style>

 <div id="app">
        <div id="demo">
            <button v-on:click="show = !show">
              Toggle
            </button>
            <transition>
                <p v-if="show">hello</p>
            </transition>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: '#demo',
            data: {
                show: true
            }
        })
    </script>

在上述代码中，六个class只使用了四个，因为v-enter-to、v-leave这两个类作用不大，第一个类是因为会被移除，第二个类是未起作用。所以可以不写这两个类的样式

通过CSS 过渡完成过渡

CSS 动画用法同 CSS 过渡，区别是在动画中v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

将上面的CSS 切换成下列代码：

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

自定义过渡的类名

在上面的描述中，我们知道了与过渡有关的六个class，我们也可以自定义这六个class 的名称，enter-class、enter-active-class、enter-to-class、leave-class、leave-active-class和leave-to-class 这六个属性可以用于自定义六个类名，主要作用于transition组件，具体使用方式如下所示：

<transition
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >

显性的过渡持续时间

过渡肯定有过渡时间，我们之前在CSS 动画和CSS 过渡中可以设置时间，而也可以通过 组件上的 duration属性设置一个显性的过渡持续时间 (以毫秒计)：

<transition :duration="1000"></transition>

也可以分开设置进入和移出的持续时间：

<transition :duration="{ enter: 500, leave: 800 }"></transition>

animate.css动画库

vue项目使用animate.css动画库

1、下载：npm install animate.css --save

也可以在页面添加文件引用
页面添加animate.css文件：https://daneden.github.io/animate.css/

<link rel="stylesheet" href="./animate.css">

2、引用，在全局min.js中引用

import animated from 'animate.css'

3、就可以正常在页面使用了

举例:

<h1 class="animate__animated animate__bounce">An animated element</h1>

进入animate.css官网点击右侧可以挑选需要的动画，鼠标滑上会显示如下图中圈出来的图案，可以直接点击复制类名，在需要使用动画的元素添加两个类名一个是animate__animated必须有，在加上在官网复制的这个类名即可

这里是animate.css官网