lovecoding
/
W0407


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list-enter-active,
        .list-leave-active {
            transition: all 3s linear;
        }

        .list-enter-from,
        .list-leave-to {
            transform: translate(100px, 200px);
            opacity: 0;
        }
    </style>
</head>

<body>
    <!--
     v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。

    v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。

    v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。

    v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。

    v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。

    v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。
 -->
    <div id="app">
        <button @click="show = !show">修改</button>
        <Transition name="list">
            <div v-show="show">展示内容</div>
        </Transition>
    </div>
    <script src="../初阶/vue.js"></script>
    <script>

        var app = new Vue({
            el: "#app",
            data: {
                msg: "你好啊",
                show: true
            },
            methods: {
                changeMsg() {
                    this.msg = '哈哈哈';
                    console.log(document.querySelector("h1").innerHTML, '111');
                    this.$nextTick(() => {
                        // 视图更新 数据未更新
                        console.log(document.querySelector("h1").innerHTML, '222');
                    })
                }
            },
        })
    </script>
</body>

</html>