Vue -- CSS动画原理（二十二）

最新推荐文章于 2022-10-25 14:28:57 发布

Yee Jason

最新推荐文章于 2022-10-25 14:28:57 发布

阅读量113

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_38287952/article/details/88290435

版权

vue 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中CSS动画原理</title>
    <script src="../vue.js"></script>
    <style>
        .v-leave-to,
        .v-enter {
            opacity: 0;
        }
        .v-enter-active,
        .v-leave-active {
            transition: opacity 3s;
        }
    </style>
</head>
<body>
<!--
    原理： 当一个元素被 transition 包裹了之后，vue会自动的分析一下元素的css样式，构建一个动画的流程
-->

    <div id="root">
        <transition>
            <div v-if="show">Hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            show: true
        },
        methods: {
            handleClick: function () {
                this.show = !this.show;
            }
        }
    });
</script>
</body>
</html>

Yee Jason

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue -- CSS动画原理（二十二）

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue中CSS动画原理&lt;/title&gt; &lt;script src="../vue.js"&gt;&a
复制链接

扫一扫

专栏目录