vue之vue与animate.css动画结合

最新推荐文章于 2024-08-28 17:58:52 发布

Quincy379

最新推荐文章于 2024-08-28 17:58:52 发布

阅读量1.5k

点赞数 1

分类专栏： vue-js 文章标签：动画

本文链接：https://blog.csdn.net/qq_33733970/article/details/78707056

版权

vue-js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!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>