【VUE】@keyframes接收以及使用Animate.css库

这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战

@keyframes

在CSS动画中，有一种“显式”的动画技术，就是可以在CSS里直接指定动画效果，这需要使用keyframes属性。

用CSS声明这样的动画效果非常简单。首先，用@keyframes描述动画效果规则。

@keyframes bounce-in {
        0% {
                transform: scale(0);
        }
        50% {
                transform: scale(0.5);
        }
        100% {
                transform: scale(1);
        }
}

在一个 @keyframes 代码块里，包含着一系列的CSS规则，统称为 keyframes。一个 keyframe 定义了一个完整动画里某一时刻的一种动画样式。动画绘制引擎会连贯平滑的实现各种样式间的转换。上述代码定义了一个名字bounce-in的keyframes动画，该动画有三个 keyframes，分别表示动画的各个阶段的动作场景：一个是动画的起始状态( “0%” 代码块)中间状态（“50%” 代码块）和终止状态 ( “100%” 代码块)。

定义动画完成后，我们可以使用 animation-name 将其与动画目标元素关联起来。

.fade-enter-active {
        transform-origin: left center;
        animation: bounce-in 1s;
}

.fade-leave-active {
        transform-origin: left center;
        animation: bounce-in 1s reverse;
}

<transition name="fade" >
        <child v-if="show"></child>
</transition>

// 其他代码可参见上一篇文章

对于复杂的CSS动画可以借助Animate.css库实现，节省效率和时间成本。

Animate.css库

Animate.css 是一个有趣的，跨浏览器的css3动画库。

安装

使用 npm 安装：

$ npm install animate.css --save

将其导入到您的文件中：

import "animate.css"

或者使用 CDN 将其直接添加到您的网页：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

使用方法

引入Animate.css库，如上；
在标签的class命名中直接添加动画class名；
若在组件中使用，实现显示/隐藏的控制，则直接在transition中的enter-active-class和leave-active-class中设置。

<div id="app">
        <button type="button" @click="handleClick">切换显示/隐藏</button>
        <transition name="fade" 
                    enter-active-class="animated swing" 
                    leave-active-class="animated bounce">
            <child v-if="show"></child>
        </transition>
</div>

注意：

需要使用自定义的class名形式去使用此CSS动画库；
class中需包含 animated 具体类名 + 具体动画名(根据现实需求)。