欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

vue中使用animate.css库动画和过度动画

程序员文章站 2024-03-25 14:39:16
...
<!DOCTYPE html>
<html>
<head>
    <title>vue中使用animate.css库动画和过度动画</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./animate.min.css">
    <style>
            /*// 动画过度*/
        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 3s;
        }
        
    </style>
</head>
<body>
<div id='app'>
    <!-- // appear 设置初始动画 -->
    <!-- // ：duration 自定义动画时间 -->
    <!-- // type： transition 以 transition动画世界为准-->
    <transition 
                ：duration="{enter:5000,leace:10000}"
                name="fade"
                appear
                enter-active-class="animated swing fade-enter-active"
                leave-active-class="animated shake fade-leave-active"
                appear-active-class="animated swing">
    <div v-if="show" >hello world</div>
    </transition>
    <button @click='handleClick'>切换</button>
</div>
<script>
    
    var vm1 =  new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleClick: function() {
                this.show = !this.show
            }
        }
    
        
    })
    
</script>
</body>
</html>

上一篇： MySQL学习笔记(练习版)

下一篇： ES7.8 设置 xpack

推荐阅读