Vue中使用animate实现动画

最新推荐文章于 2024-07-18 15:42:46 发布

键盘的打工仔

最新推荐文章于 2024-07-18 15:42:46 发布

阅读量694

点赞数

本文链接：https://blog.csdn.net/weixin_45616246/article/details/105419675

版权

请陛下批阅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animate第三方类库</title>
    <script src="../../vue/vue-v2.6.11.js"></script>
    <link rel="stylesheet" href="../../animate/animate.css">
</head>
<body>
<div id="app">
    <button @click="flag=!flag">显示/隐藏</button>
    <!--
        enter-active-class 指定入场动画
        leave-active-class 指定离场动画
        :druation 设置入场和离场的动画时间
        注意: 在使用 animate 类库的时候,要在需要加动画的元素上加 animated 属性
    -->
    <transition
            enter-active-class="bounceIn"
            leave-active-class="bounceOut"
            :druation="{enter : 50, leave : 600}">
        <h3 v-if="flag" class="animated">这是一个H3</h3>
    </transition>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag: false,
        }
    });
</script>
</html>