Vue中使用css过渡动画和animate的使用

在Vue中添加css过渡动画和animate的使用

大家好，我是狗子敲代码，小名狗子，讲一下在Vue中使用css过渡动画和引入animate.css，首先看一下在代码中直接使用css过渡动画

<body>
<div id="app">
    <transition>
        <div v-if="show">hello gouzi</div>
    </transition>
    <button @click="ButClick">过渡</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            ButClick: function () {
                this.show = !this.show;
            }
        },
    })

在这里，我想实现点击过渡这个按钮，让hello gouzi消失和出现，并且在消失和出现时有出场的渐变动画和结束的渐变动画
可以看到，我在hello gouzi这个div标签外层套了一层<transition></transition>标签，所以动画的效果就全部在这个标签中实现
首先，<transition></transition>标签自带有四个class样式属性，分别是：

v-enter

 .v-enter{
            opacity: 0;
        }

v-leave-to

.v-leave-to {
            opacity: 0;
        }

v-enter-active

.v-enter-active{
            transition: opacity 3s;
        }

v-enter-active

  .v-leave-active {
            transition: opacity 3s;
        }

这四个class样式直接在<head></head>里面添加<style></style>这是样式即可实现出现和结束的渐变效果
当然这么设置就要记住很多东西，因此，接下来就讲到animate.css的使用，非常简单。
三部曲

一.百度搜索animate的官网

animate官网
官网截图

二.看到添加在代码编辑器的方法，跟着方法来，我是使用的在`<head></head>`里添加链接的方法，如果你使用过npm，那就更加简单，官网里也有讲到

引入方法网址

三.在`<transition></transition>`标签中使用，使用方法如下：

 <transition
             appear
           :duration="10000"
           :duration="{enter:5000, leave:1000}"
            enter-active-class="animated swing"
            leave-active-class="animated shake"
            appear-active-class="animated swing">
        <div v-if="show">hello gouzi</div>
    </transition>

直接在标签中添加属性就好了，看到我这里还添加了appear，这个是在网页按F5或者点击刷新的时候的出场效果。

这里格式说一下，enter-active-class="animated swing":duration="{enter:5000, leave:1000}"是设置出场时间和结束时间，animated是使用animate.css的格式，swing是在官网里看到的效果名字，对，就是这么简单，直接添加名字就可以了，

全部代码拷过来如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中css过度动画</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <style>
        .v-enter{
            opacity: 0;
        }
        .v-leave-to {
            opacity: 0;
        }
        .v-enter-active{
            transition: opacity 3s;
        }
        .v-leave-active {
            transition: opacity 3s;
        }
    </style>
</head>
<body>
<div id="app">
    <transition
            appear
            //v-enter-active是animate动画和自己设置的动画一起使用，不冲突
            enter-active-class="animated swing v-enter-active" 
            leave-active-class="animated shake v-leave-active"
            appear-active-class="animated swing">
        <div v-if="show">hello gouzi</div>
    </transition>
    <button @click="ButClick">过渡</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            ButClick: function () {
                this.show = !this.show;
            }
        },
    })
</script>
</body>
</html>

总结

第一步：将需要动画的dom外层包裹`<transition></transition>`标签

第二步：引入animate.css库

引入方法网址

第三步：在`<transition></transition>`标签中添加

enter-active-class="animated swing"
leave-active-class="animated shake"
animate官网中可以看到有非常多的动画效果
animate官网

大家好，我是狗子，帮助到你给个关注！！谢谢

狗子敲代码

发布了8 篇原创文章 · 获赞 2 · 访问量 167

私信关注