vue动画

作者: 程序猿的小生活 | 来源:发表于2022-06-25 10:16 被阅读0次

Vue中的动画
前端系统学习 10. Vue高级用法
vue的动画特效
Vue动画
Vue神一般的打开姿势
Vue动画
五、Vue动画 ------ 2020-05-07
2021-01-08
vue动画组
vue06

<html>
    <head>
         <script src="https://unpkg.com/vue@next"></script>
        <meta charset="utf-8">
        <title>vue动画</title>
    </head>
    <body>
        <div id="app">
    <button @click="ok=!ok">动画</button>
    <!-- enter-from-class动画进入前样式   enter-active-class动画进入中样式 enter-to-class动画进入后样式 -->
        <!-- leave-from-class动画离开前样式   leave-active-class动画离开中样式 leave-to-class动画离开后样式 -->
        <!-- transform: rotate(60deg); 旋转60度  :duration定义动画持续时间可覆盖transition: 6s;-->
    <transition
    enter-from-class="b"  
    enter-active-class="c"
    enter-to-class="e"
    leave-from-class="f"
    leave-active-class="g"
    leave-to-class="h"
    :duration="{enter:10000,leave:3000}"
    >
            <div class="start" v-if="ok"></div>
            </transition>
        </div>
    </body>
    <style>
        .start{
            height: 200px;
            width: 200px;
            background-color: black;
        }
        .b{
            height: 0px;
            width: 0px;
            background-color: red;
        }
        .c{
            transition: 6s;
            transform: translate3d(0,0,36px);
        }
        .e{
            /* height: 400px;
            width: 400px;
            background-color: pink; */
        }
        .f{
            /* height: 400px;
            width: 400px;
            background-color: pink; */
        }
        .g{
            transition: 6s;
        }
        .h{
            height: 0px;
            width: 0px;
            background-color: red;
        }
    </style>
    <script>
        var app={
            data(){
                return{
                    "ok":false
                }
            },
            methods: {
                
            },
        }
        var vm = Vue.createApp(app);
        vm.mount("#app")
    </script>
</html>