vue之vue与animate.css动画结合

来源：互联网发布：东北人快手低俗知乎编辑：程序博客网时间：2024/05/20 03:41

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>vue-动画</title>    <script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>    <script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">    <style>        .box {            width: 100px;            height: 100px;            background: red;        }    </style></head><body><div id="box">    <input type="button" @click="toggle" value="切换">    <transition            name="custom-classes-transition"            enter-active-class="animated tada"            leave-active-class="animated bounceOutRight">        <div v-show="ee" class="animated box"></div>    </transition></div><script>    var vm = new Vue({        delimiters: ['[[', ']]'],        el: '#box',        data: {            ee: true        },        methods: {            toggle: function () {                this.ee = !this.ee            }        }    })</script></body></html>

阅读全文

1 0