vue 和animate.css动画使用_vue 点击重新执行css动画-CSDN博客

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/animate.css" />
</head>

<body>
    <div class="asd">
        <div v-bind:class="{ bounceInUp: qwe,animated:qwe}">asdas</div>
        <!--添加class-->
        <button v-on:click="dj">点击动画 </button>
        <!--添加点击事件-->
    </div>
</body>
<script type="text/javascript">
var app = new Vue({
    el: '.asd',
    data: {
        qwe: false
    },

    methods: {
        dj: function() {
            this.qwe = !this.qwe;
            //	我已经已经在前边定义了data:{qwe: false},此时qwe是false,
            //	当我点击按钮式qwe的值就是(=!) {qwe: ture}
            //	再点击{qwe: false},以此进行class的添加与删除

        }
    }

})
</script>

</html>

此为两个按钮的vue动画

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/animate.css" />
    <style type="text/css">
    .div {
        width: 200px;
        height: 200px;
        background: blue;
        transition: height 2s;
        -moz-transition: width 2s;
        /* Firefox 4 */
        -webkit-transition: width 2s;
        /* Safari and Chrome */
        -o-transition: width 2s;
        /* Opera */
    }
    
    .divv {
        width: 400px;
        height: 400px;
        background: blue;
    }
    </style>
</head>

<body>
    <div class="asd">
        <button v-on:click="dj">购买</button>
        <div class="animated div bounceInLeft" v-bind:class="{bounceInLeft:eqw,bounceInRight:qwe,div:ewq,divv:qwe}"></div>
        <!--添加class-->
        <span v-on:click="gb">x</span>
    </div>
</body>
<script type="text/javascript">
var app = new Vue({
    el: '.asd',
    data: {
        qwe: true,
        ewq: false
    },

    methods: {
        dj: function() {
            this.eqw = true,
                this.qwe = false

        },

        gb: function() {
            this.eqw = false,
                this.qwe = true
        }
    }

})
</script>

</html>

过度效果官方API文档：https://cn.vuejs.org/v2/guide/transitions.html