在Vue中使用css动画

2019-07-04 本文已影响53人前端艾希

About

本文主要讲述了如果在Vue项目中使用css动画效果，包括过渡和动画

同时运用过渡和动画，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animate动画</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<body>
    <div id="app" class="container">
        <div class="animation">
            <transition name="fade"
                        appear
                        :duration="{enter:1000, leave:3000}"
                        enter-active-class="animated bounce fade-enter-active"
                        leave-active-class="animated jello fade-leave-active"
                        appear-active-class="animated jello">
                <div v-if="isShow">hello world</div>
            </transition>
        </div>
        <button v-if="isShow" @click="handelBtnClick">隐藏</button>
        <button v-else @click="handelBtnClick">显示</button>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isShow: true,
            },
            methods: {
               handelBtnClick: function () {
                   this.isShow = !this.isShow;
                   console.log()
               }
            }
        })
    </script>

    <style>
        .animation {
            width: 100px;
            height: 50px;
            margin-top: 20px;
        }
        .fade-enter, .fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active, .fade-leave-active {
            transition: opacity 3s;
        }
    </style>
</body>
</html>

效果如图：

动画效果.gif

一、原生动画

使用动画效果需要使用transition标签，可以给标签的name赋值，作为该标签的唯一标识符。

vue动画原理

每一个动画从入场到离场都经历了一系列的过程，在这一过程中会有过渡效果，入场时，vue自动给动画元素添加enter和enter-active两个class，动画开始时会去掉enter这个class，添加enter-to的class，结束时会移出enter-to和enter-active；离场时同样会在开始时添加着一系列的class，只不过将enter改为leave。所以我们只需要在css中给这几个class添加样式就能完成入场和离场的过渡了。

代码：

// html
<transition name="fade">  // transition命名为fade
    <div v-if="isShow">hello world</div>
</transition>

// css
.fade-enter, .fade-leave-to {   // 声明入场的开始和离场的结束的样式
    opacity: 0;  
}
.fade-enter-active, .fade-leave-active {  // 声明过渡动画持续时间
    transition: opacity 3s;
}

除了上述办法，还可以用@keyframes来定义动画效果，代码如下：

// css
@keyframes change-size {
    0% {
        transform: scale(0);
    },
    50% {
        transform: scale(1.5);
    },
    100% {
        transform: scale(1);
    }
}
.fade-enter, .fade-leave-to {   // 声明入场的开始和离场的结束的样式
    animation: change-size 1s;
}
.fade-enter-active, .fade-leave-active {  // 声明过渡动画持续时间
    animation: change-size 1s reverse;
}

二、animate库实现动画效果

借助第三方库我们可以轻易实现很多效果非常棒的动画效果。代码如下：

// 首先需要引入这个animate库
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> 

// 声明动画的区域
<transition name="fade"
            appear="true"  // 设置开启刚渲染完成后的动画效果
            :duration="{enter:1000, leave:3000}"  // 设置动画效果的持续周期
            enter-active-class="animated bounce "  // 设置动画效果 格式为： animated + 效果
            leave-active-class="animated jello "
            appear-active-class="animated jello">
    <div v-if="isShow">hello world</div>
</transition>