vue多元素动画

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

vue06
12.2使用animate.css
vue多元素动画
Vue之transition
17.vue中多个元素或者多个组件的过渡动画列表过渡
Vuejs动画
Vue中多个元素、组件的过渡及列表过渡的方法示例
Vue实践与总结——动画
Vue动画
Vue中多个元素或组件的过渡

<html>
    <head>
        <script src="https://unpkg.com/vue@next"></script>
        <meta charset="utf-8">
        <title>多元素动画</title>
    </head>
    <body>
        <div id="app">
            <button @click="go()" style="margin-bottom: 30px;">点击</button>
            <transition
            enter-from-class="anonefrom"
            enter-active-class="anoneactive"
            leave-active-class="anoneleave"
            leave-to-class="anoneto"
            >
            <div v-if="ok==0" class="a"></div>
            <div v-else-if="ok==1" class="b"></div>
            <div v-else-if="ok==2" class="c"></div>
            </transition>
            
            
        </div>
    </body>
    <script>
        Vue.createApp({
            data(){
                return{
                "ok":0
                }
            },
            methods: {
            go(){
                this.ok++;
                if(this.ok>2){
                    this.ok=0;
                }
            }
            },
        }).mount("#app")
        
        
    </script>
    <style>
        .a{
        width: 150px;   
        height: 150px;  
        background-color: black;
        }
        .b{
        width: 75px;    
        height: 75px;   
        background-color: pink;
        }
        .c{
            width: 75px;
            height: 75px;   
            background-color: limegreen;
            border-radius: 50%;
        }
        .anonefrom{
            width: 0;
            height: 0;
            transform: rotate(30deg);
        
        }
        .anoneactive{
            transition:2s
        }
        .anoneleave{
            transition:2s
            
        }
        .anoneto{
            width: 0;
            height: 0;
        
        }
    </style>
</html>