Vue中同时使用过渡和动画

最新推荐文章于 2022-09-22 22:55:34 发布

要不要吃烤肉

最新推荐文章于 2022-09-22 22:55:34 发布

阅读量255

点赞数

分类专栏：前端学习文章标签： vue css3

本文链接：https://blog.csdn.net/Smart_J_King/article/details/108674198

版权

前端学习专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中同时使用过渡和动画</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./animate.css">
    <style>
        .myfade-enter, .myfade-leave-to {
            opacity: 0;
        }
        .myfade-enter-active, .myfade-leave-active {
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- appear和appear-active-class设置页面加载完成时DOM元素显示的动画效果 -->
        <!-- animate动画和transition过渡的时长不同，以type=""定义以谁为准,如：type="transition"，以过渡效果的时长为准 -->
        <!-- 或者自定义时长 :duration="10000" 通用设置，也可以设置的复杂一些-->
        <transition 
            :duration="{enter:5000, leave:10000}"
            name="myfade" 
            appear
            enter-active-class="animate__animated animate__swing myfade-enter-active" 
            leave-active-class="animate__animated animate__shakeX myfade-leave-active"
            appear-active-class="animate__animated animate__swing"
        >
            <div v-show="show">Vue中同时使用过渡和动画</div>
        </transition> 
        <button @click="handleBtnClick">切换</button>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                show: true
            },
            methods: {
                handleBtnClick: function() {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>
</html>