Vue 2.0学习笔记：Vue的animation

#Vue #Vue学习笔记 #Web动画 #Animation #Vue动画 #Vue #会员专栏

发布于大漠

5 年前

上一节我们学习了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中，有关于动画的内容不仅仅是这些，还有更多有意思的东西。我们将在后续的内容还会持续更新和关注这一领域的内容。感兴趣的同学欢迎关注后续的更新。如果您有更多的经验欢迎在下面的评论中与我们分享，如果文章中有不对之处，还请多多指正。Nike Zoom Shift Shoe

Vue 2.0学习笔记：Vue的animation

回忆一下CSS中的animation

Vue中的animation

自定义过渡的类名

显式地过渡持续时间

案例： 列表滚动

总结

Vue中的`animation`

案例：列表滚动