Vue 2.0学习笔记:Vue的animation

栏目: CSS · 发布时间: 6年前

内容简介:上一节我们学习了Vue 2.0中的CSS的

上一节我们学习了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

Vue 2.0学习笔记:Vue的animation

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

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

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

Vue中的 animation

在Vue中实现 animation 效果的用法和 transition 类似,同样是把需要设有动效的元素放置在 <transition> 中。 animationtransition 不同的是在 animationv-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-classenter-active-classleave-classleave-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-classleave-active-class 足以满足所需的动画。

显式地过渡持续时间

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

在这种情况下,可以在 <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动画来实现下图这样的效果:

Vue 2.0学习笔记:Vue的animation

在没有使用 <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>

在这里我们引用了 slideInUpslideOutUp 两个动画效果,分别在 enter-activeleave-active 两个状态调用。

在这个示例中,我们的内容不是通过 v-ifv-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> 是怎么实现 transitionanimation 效果。其实在Vue中,有关于动画的内容不仅仅是这些,还有更多有意思的东西。我们将在后续的内容还会持续更新和关注这一领域的内容。感兴趣的同学欢迎关注后续的更新。如果您有更多的经验欢迎在下面的评论中与我们分享,如果文章中有不对之处,还请多多指正。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Rationality for Mortals

Rationality for Mortals

Gerd Gigerenzer / Oxford University Press, USA / 2008-05-02 / USD 65.00

Gerd Gigerenzer's influential work examines the rationality of individuals not from the perspective of logic or probability, but from the point of view of adaptation to the real world of human behavio......一起来看看 《Rationality for Mortals》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具