Vue 2.0学习笔记：Vue的animation

上一节我们学习了Vue 2.0中的 <transition> 实现元素从状态 A 到状态 B 的过渡效果。对于元素过渡的效果是通过CSS的 transition 来完成，具体什么时候执行是由Vue来控制的。而 transition 的效果毕竟有所限制，对于一些复杂的动效，还是需要通过别的方式来完成。在Vue中除了 transition 之外还可以完成 animation 的效果。也就是可以将CSS的 animation 运用到Vue中来，实现一些动画效果。今天这篇文章我们就来学习如何在Vue运用CSS的 animation 。

回忆一下CSS中的animation

CSS的 animation 已经不是什么新技术了，在Web上随处都有可能看到CSS的 animation 实现的动效。而且社区中有关于使用 animation 实现动画的库也非常的多，比如@Daniel Eden的 Animate.CSS ：

在CSS中 animation 的原理非常的简单，首先要通过 @keyframes 声明一个动画，然后通过 animation-name 来调用声明好的动画名。当然 animation 还提供了其他的属性来帮助我们更好的控制CSS动画。有关于CSS的动画相关的介绍，这里不做过多的阐述，如果你感兴趣的话可以点击这里 或这里进行了解。

在这里我们来看一个简单的动画案例：

有关于CSS 动画相关的代码就不贴出来了，感兴趣的话可以直接查看上面的Demo。那么我们接下来看看在Vue中怎么运用CSS的 animation 来实现动效。

Vue中的 animation

在Vue中实现 animation 效果的用法和 transition 类似，同样是把需要设有动效的元素放置在 <transition> 中。 animation 和 transition 不同的是在 animation 中 v-enter 类名在节点插入DOM后不会立即删除，而是在 animationEnd 事件触发时删除。比如下面这个示例：

<!-- Bounce.vue -->
<template>
    <div class="animation">
        <button @click="isToggle" :class="isShow ? 'is-show' : 'is-hidden'">
            {{ isShow ? "隐藏" : "显示" }}
        </button>
        <transition name="bounce">
            <div class="animation-el" v-if="isShow"></div>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "Bounce",
        data() {
            return {
                isShow: false
            };
        },
        methods: {
            isToggle() {
                this.isShow = !this.isShow;
            }
        }
    };
</script>
<style scoped>
    .bounce-enter-active {
        animation: bounce 1s;
    }
    .bounce-leave-active {
        animation: bounce 1s reverse;
    }

    @keyframes bounce {
        0% {
            background-position: 50% calc(50% - 4em), 50% calc(50% + 0.4em);
            background-size: 2em 2em, 1em 1em;
        }
        40% {
            background-position: 50% 50%, 50% calc(50% + 0.3em);
            background-size: 2em 2em, 3em 1em;
        }
        45% {
            background-position: 50% 50%, 50% calc(50% + 0.3em);
            background-size: 2em 1.5em, 3em 1em;
        }
        50% {
            background-position: 50% 50%, 50% calc(50% + 0.3em);
            background-size: 2em 1em, 3em 1em;
        }
        100% {
            background-position: 50% calc(50% - 4em), 50% calc(50% + 0.3em);
            background-size: 2em 2em, 1em 1em;
        }
    }
</style>

效果如下：

自定义过渡的类名

上面的示例中再次告诉我们，CSS动画可以像过渡一样在Vue中使用。前面也提到了，@Daniel Eden的 Animate.CSS 是一个非常优秀的CSS动画库。既然他这么优秀，因此在Vue中我们可以很容易地将其应用到相应的应用中。如果你需要把Animate.CSS运用到Vue中，你可以使用 npm 或CDN来添加 animate.css 到Vue应用程序中。

npm i animate.css --save

然后在 main.js 中引入 animate.css ：

import "animate.css"

如果通过CDN的话，可以 index.html 中通过 <link> 引入 animate.css 在CDN的地址，比如：

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

animate.css 为我们提供了CSS类，让我们可以方便地向元素添加动画。但是我们如何在Vue中将这些类应用到对应的元素中呢？通过上一切的学习，我们了解到，可以通过 enter-class 、 enter-active-class 、 leave-class 和 leave-active-class 作为输入，帮助我们将动画类附加到对应的元素上。在Vue中，我们把这些类名称为自定义过渡类名：

enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class

这几个类名在Vue中被称为 自定义过渡类名 ，他们的优先级高于普通的类名。特别是在引入像 animate.css 这样的第三方CSS动画库十分地有用。比如下面这个示例：

<!-- Bounce.vue -->
<template>
    <div class="toogle-alert">
        <button @click="isToggle" :class="isShow ? 'is-show' : 'is-hidden'">
            {{ isShow ? "隐藏" : "显示" }}
        </button>

        <transition
            mode="out-in"
            appear
            enter-active-class="animated bounceIn"
            leave-active-class="animated bounceOut"
        >
            <div class="alert alert-info" v-if="isShow" key="info">
                {{ alertInfoMsg }}
            </div>
            <div class="alert alert-error" v-else key="error">
                {{ alertErrorMsg }}
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "Bounce",
        data() {
            return {
                isShow: true,
                alertInfoMsg: "Hello! W3cplus.com!",
                alertErrorMsg: "Goodbye! W3cplus.com!"
            };
        },
        methods: {
            isToggle() {
                this.isShow = !this.isShow;
            }
        }
    };
</script>

效果如下：

正如上例，在大多数情况下， enter-active-class 和 leave-active-class 足以满足所需的动画。

显式地过渡持续时间

在CSS的 animation 中，我们有 animation-duration 和 animation-delay 可以用来控制动画播放时间。而在Vue中，很多情况之下，可以自动得出过渡效果完成时间。默认情况下，Vue会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定，比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。

在这种情况下，可以在 <transition> 上添加 duration 属性定制一个显式地过渡持续时间（以 ms 为单位），比如上面的示例，我们可以像下面这样添加 duration 属性值：

<transition
    mode="out-in"
    appear
    enter-active-class="animated zoomIn"
    leave-active-class="animated hinge"
    :duration="1000"
>
...
</transition>

得到的效果如下：

你也可以定制进入和移出的持续时间：

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

效果如下：

案例： 列表滚动

接下来看看怎么使用Vue中的 <transition> 和CSS动画来实现下图这样的效果：

在没有使用 <transition> 的情况下，实现上图的效果，我们可能会考虑下面这个示例这样的方式来实现：

接下来我们来看看怎么使用 animate.css 配合 <transition> 实现类似上例的效果：

详细代码不介绍。

<transition
    appear
    enter-active-class="animated slideInUp"
    leave-active-class="animated slideOutUp"
    mod="out-in"
    :duration="{ enter: 500, leave: 800 }"
    >
    <div :key="content.id" class="slider">
        <div class="avatar">
        <img :src="content.avatar" :alt="content.nick" />
        </div>
        <div class="msg">{{ content.nick }} ! {{ content.msg }}</div>
    </div>
</transition>

在这里我们引用了 slideInUp 和 slideOutUp 两个动画效果，分别在 enter-active 和 leave-active 两个状态调用。

在这个示例中，我们的内容不是通过 v-if 或 v-show 来插入和删除的，而以通过在 computed 中的 content() 方法配合一个 SliderAnimation() 函数来实现的。 SliderAnimation() 是一个定时器，在定时器中不断改变 computed 对应的值：

computed: {
    content() {
        return {
            id: this.num,
            avatar: this.lists[this.num].avatar,
            nick: this.lists[this.num].nick,
            msg: this.lists[this.num].msg
        };
    }
},
mounted() {
    this.SliderAnimation();
},
methods: {
    SliderAnimation() {
        this.lists.push(this.lists[0]);
        const max = this.lists.length;
        let timer = setTimeout(() => {
            this.num++;
            if (this.num >= max) {
            this.num = 0;
            }
            this.SliderAnimation();
        }, this.totalDuration);
    }
}

总结

这篇文章主要介绍了在Vue中的 <transition> 是如何结合CSS的 animation 动画库（ animate.css ）实现动画效果。通过这篇文章的学习，我们已经了解了在Vue中 <transition> 是怎么实现 transition 和 animation 效果。其实在Vue中，有关于动画的内容不仅仅是这些，还有更多有意思的东西。我们将在后续的内容还会持续更新和关注这一领域的内容。感兴趣的同学欢迎关注后续的更新。如果您有更多的经验欢迎在下面的评论中与我们分享，如果文章中有不对之处，还请多多指正。