Vue入门学习之技术分享-3(Vue中的动画特效）

栏目: 编程语言 · 发布时间: 5年前

内容简介：今天又是学习的一天，但是我今天不想熬夜了，我要去看一会会电视剧了。等我哪天忘了我就打开我的掘金然后猫几眼寄几写的东西总结内容如下如果需要动画效果则需要把元素放在包裹的标签上增加一个叫fade-leave的类名，同时还会增加一个叫fade-leave-active的类名，在第二帧的时候vue会把fade-leave去除掉然后增加一个fade-leave-to的类名，到最后一帧的时候vue会把fade-leave-active和fade-leave-to去除掉。

今天又是学习的一天，但是我今天不想熬夜了，我要去看一会会电视剧了。等我哪天忘了我就打开我的掘金然后猫几眼寄几写的东西总结内容如下

正文

Vue中的CSS动画原理

如果需要动画效果则需要把元素放在 transition 标签之中(可以给transition标签取一个名字加入这个名字是fade)，这样就会有一个过渡的动画效果。原理：原理：当一个元素被 transition 包裹之后，vue会自动的分析元素的css样式，然后构建一个动画流程，vue会在动画即将执行的一瞬间往内部的标签元素上增加两个class类名，分别是fade-enter和fade-enter-active，当动画第一帧执行结束之后，vue分析transition过后知道它是一个动画效果的时候，vue会在动画运行到第二帧的时候干两件事件， 1 .除去fade-enter这个类名 2 .加上fade-enter-to类名。然后动画继续执行，直到结束的一瞬间，vue会把fade-enter-active和fade-enter-to去除掉

当被包裹在 transition 标签中的元素，从显示状态到隐藏状态的时候，vue会自动的构建一个隐藏的动画流程，隐藏开始的一瞬间，vue会在被 transition

包裹的标签上增加一个叫fade-leave的类名，同时还会增加一个叫fade-leave-active的类名，在第二帧的时候vue会把fade-leave去除掉然后增加一个fade-leave-to的类名，到最后一帧的时候vue会把fade-leave-active和fade-leave-to去除掉。

如果你还是没看懂的话，你可以复制下面的代码，自己取试一哈(我不管你了，你几寄玩)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的CSS动画原理</title>
    <script src="../vue.js"></script>
    <style>
        .fade-enter {
            opacity: 0;
        }
        .fade-enter-active {
            transition: opacity 3s;
        }
        .fade-leave-to {
            opacity: 0;
        }
        .fade-leave-active {
            transition: opacity 3s;
        }
    </style>
</head>
<body>
    <div id="app">
        <transition name="fade">
        <div v-if="show">hello world</div>
        </transition>
       
       <button @click="handleClick">切换</button>
    </div>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                    show:true
            },
            methods: {
                handleClick:function() {
                    this.show = !this.show
                }
            },
        })
    </script>
</body>
</html>
复制代码

在Vue中使用Animate.css库

当你制作动画效果时可以使用css3中的animation等来制作，当你不想自己敲得时候（就很懒，不服就来打我:pig:）怎么办呢？这个时候就可以用到Animate.css（提供的都是CSS3@keyframes的动画效果）点进去，你会有多种动画效果选择,那么该怎么用呢？

到官网下载Animate.css库
在transition上把enter-active-class和leave-active-class都改为animated这样一个class名字。意思就是告诉vue我要使用的是animate库里面的动画效果

<transition 
        name="fade"
        enter-active-class="animated"
        leave-active-class="animated"
        >
复制代码

第三步去annimate库里面选择你想要的动画效果的名字，然后加在animated后面

enter-active-class="animated swing"
leave-active-class="animated shake"
复制代码

4. 然后看起来就很装逼了。:grinning:,给一段简单代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在Vue中使用Animate.css库</title>
    <script src="../vue.js"></script>
    <link rel="stylesheet" href="./animate.css">
    <style>  
        
    </style>
</head>
<body>
    <div id="app">
        <transition 
        name="fade"
        enter-active-class="animated swing"
        leave-active-class="animated shake"
        >
        <div v-if="show">hello world</div>
        </transition>
       
       <button @click="handleClick">切换</button>
    </div>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                    show:true
            },
            methods: {
                handleClick:function() {
                    this.show = !this.show
                }
            },
        })
    </script>
</body>
</html>
复制代码

但是上面这个代码运行时你会发现在页面第一次渲染的时候元素是没有动画效果的，如何让元素第一次在页面上加载时也有动画效果呢:eyes:

z只要在transition上加下面这两行代码就行了

<transition 
        name="fade"
        appear  
        enter-active-class="animated swing"
        leave-active-class="animated shake"
        appear-active-class="animated swing"
        >
复制代码

一个是appear，这就告诉vue我第一次加载也要动画，不给就哭

然后呢就是 appear-active-class="animated swing"这句了，就是指定第一次使用啥子动画效果，然后就大功告成了

在Vue中同时使用过度和动画

如果你又想用Animate库提供的@keyframes动画同时又想用transition动画怎么办呢？

这好办把

enter-active-class="animated swing"
leave-active-class="animated shake"
复制代码

改成

enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
复制代码

就可以像之前一样自己定义transition动画了。但是需要注意敲重点:woman:‍:school:Animate库的@keyframes动画有自己的时间（看css文件就能看到了），而你自定义的transition也自己定义时间，这个时候动画时间到底多长呢？其实vue也分不清楚。这时候就需要我们手动设置了。在transition标签上加上一个

<transition 
        type="transition"
复制代码

它的意思是动画既有Animate库的@keyframes动画也有transition形式的动画，但是我们以transition动画的时长为准来确定动画播放时长。当然也可以自定义动画时长，如果自定义就需要这样写了

<transition 
        :duration="10000"
复制代码

单位是毫秒，上一步的type不需要设置。可以自己打开控制台审查元素看动画执行时候的动画时长，也可以设置的相对复杂一点

:duration="{enter: 5000,leave:10000}"
复制代码

把入场动画和消失动画的时长都规定好

结语

今天还有四个动画效果知识点没有写完，明天再往文章里加8，今天先放过自己睡个好觉:grin:，希望这篇文章有能帮到看文章的你

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

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

码农书籍

写给大家看的算法书

【日】杉浦贤 / 绝云 / 电子工业出版社 / 2016-6 / 59.00元

算法这个词对于非计算机从业人士而言，似乎就是晦涩、神秘的代名词。其实，算法在日常生活中随处可见。做饭用的菜谱是一种算法、查字典的方法是一种算法、给期中考试分数排名也用到了算法。事实上，算法可以说是这个信息爆炸的时代所依存的重要基石之一。《写给大家看的算法书》对于理解信息处理的基础——算法而言，是一本非常优秀的入门读物。作者采用大量生动的类比，配合简洁易懂的配图，深入浅出地讲解算法，极大地拉......一起来看看《写给大家看的算法书》这本书的介绍吧!

码农工具