基础CSS过渡和动画

动画：keyframes
过渡：transition

<style>
        /* 动画
        @keyframes leftToRight{
            0%{
                transform: translateX(-100px);
            }
            50%{
                transform: translateX(-50px);
            }
            100%{
                transform: translateX(0px);
            }
        }
        .animation{
            animation: leftToRight 3s;
        } */
        /*过渡 
        .transition{
            transition: 3s background-color ease;
        }
        .blue{
            background: blue;
        }
        .green{
            background: green;
        } */
        .transition{
            transition: 3s background-color ease;
        }
    </style>

<script>
    //过渡：一个状态转变为另一个状态
    const app = Vue.createApp({
        data(){
            return{
                // animate:{
                //     // transition:true,
                //     // // animation:true
                //     // blue:true,
                //     // green:false               
                // },
                styleObject:{
                        background:'blue',
                    }
            }
        },
        methods: {
            handleClick(){
                // this.animate.animation=!this.animate.animation;
                // this.animate.blue=!this.animate.blue;
                // this.animate.green=!this.animate.green;
                if(this.styleObject.background==='blue'){
                    this.styleObject.background='green';
                }else{
                    this.styleObject.background='blue';
                }
            }
        },
        template:`
            <div class="transition" :style="styleObject">hello world</div>
            <button @click="handleClick">切换</button>
        `
    });
   const vm = app.mount("#root");
</script>

列表动画

<style>
        .v-enter-from{
            opacity: 0;
            transform: translateY(30px);
        }
        .v-enter-active{
            transition: all .5s ease-in;
        }
        .v-enter-to{
            opacity: 1;
            transform: translateY(0);
        }
        .v-move{
            transition: all .5s ease-in;
        }
        .item-list{
            display: inline-block;
            margin-right: 10px;
        }
    </style>

<script>
    //列表动画的实现
    const app = Vue.createApp({
        data(){
            return{
               list:[1,2,3]
            }
        },
        methods: {
            handleClick(){
                this.list.unshift(this.list.length+1);
            }
                
        },
        template:`
            <div>
                <transition-group>
                    <span class="item-list" v-for="item in list" :key="item">{{item}}</span>
                </transition-group>
                <button @click="handleClick">增加</button>
            </div>
        `
    });
</script>

状态动画

 //状态动画的实现
    const app = Vue.createApp({
        data(){
            return{
              number:1,
              animateNumber:1
            }
        },
        methods: {
            handleClick(){
                this.number=10;
                if(this.animateNumber<this.number){
                    const animation = setInterval(()=>{
                        this.animateNumber+=1;
                        if(this.animateNumber===10){
                            clearInterval(animation);
                        }
                    },100)
                }
               
            }
                
        },
        template:`
            <div>
                <div>{{animateNumber}}</div>
                <button @click="handleClick">增加</button>
            </div>
        `
    });

组件和元素切换

1.多元素切换

    <transition mode="out-in" appear>
        <div v-if="show">hello world</div>
        <div v-else="show">bye world</div>
    </transition>

2.多组件切换

    const ComponentA={
        template:'<div>hello world</div>'
    }
    const ComponentB={
        template:'<div>BYE world</div>'
    }
    components:{
        'component-a':ComponentA,
        'component-b':ComponentB,
    },
    <transition mode="out-in" appear>
        <component-a v-if="show" />
        <component-b v-else="show" />
    </transition>

<style>
        .v-leave-to{
            opacity: 0;
        }
        .v-enter-from {
            opacity: 0;
        }
        
        .v-enter-active ,
        .v-leave-active {
            transition: opacity 3s ease-in;
        }
        .v-leave-from ,
        .v-enter-to {
                    opacity: 1;
                }
    </style>

<script>
    const ComponentA={
        template:'<div>hello world</div>'
    }
    const ComponentB={
        template:'<div>BYE world</div>'
    }
    const app = Vue.createApp({
        data(){
            return{
                show:false,
            }
        },
        methods: {
            handleClick(){
                this.show=!this.show;
            }
                
        },
        components:{
            'component-a':ComponentA,
            'component-b':ComponentB,
        },
        template:`
            <div>
                <transition mode="out-in" appear>
                    <component-a v-if="show" />
                    <component-b v-else="show" />
                </transition>
                <button @click="handleClick">切换</button>
            </div>
        `
    });
   const vm = app.mount("#root");
</script>

transition标签

v为默认名字，如果transition标签的name为其他，则把v换成name的内容

<style>
        @keyframes snake {
            0%{
                transform: translateX(-100px);
            }
            50%{
                transform: translateX(-50px);
            }
            100%{
                transform: translateX(50px);
            }
        }
        .v-enter-active{
           animation: snake 3s;
        }
        .v-leave-active{
            animation: snake 3s;
        }
        /* v为默认名字，如果transition标签的name为其他，则把v换成name的内容
        .v-enter-from{
            opacity: 0;
        }
        .v-enter-active{
            transition: opacity 3s ease-out;
        }
        .v-enter-to{
            opacity: 1;
        }
        .v-leave-from{
            opacity: 1;
        }
        .v-leave-active{
            transition: opacity 3s ease-in;
        }
        .v-leave-to{
            opacity: 0;
        }  */
    </style>

<script>
    const app = Vue.createApp({
        data(){
            return{
                show:false,
            }
        },
        methods: {
            handleClick(){
                this.show=!this.show;
            }
                
        },
        template:`
            <div>
                <transition>
                    <div v-if="show">hello world</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
        `
    });
    app.component({

    });
   const vm = app.mount("#root");
</script>

<style>
        /* @keyframes snake {
            0%{
                transform: translateX(-100px);
            }
            50%{
                transform: translateX(-50px);
            }
            100%{
                transform: translateX(50px);
            }
        }
        .hello{
           animation: snake 3s;
        }
        .bye{
            animation: snake 3s;
        } */

    </style>

<script>
    //过渡：一个状态转变为另一个状态
    const app = Vue.createApp({
        data(){
            return{
                show:false,
            }
        },
        methods: {
            handleClick(){
                this.show=!this.show;
            }
                
        },
        template:`
            <div>
                <transition
                enter-active-class="animate__animated animate__bounce"
                leave-active-class="animate__animated animate__bounce"
                >
                    <div v-show="show">hello world</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
        `
    });
  
   const vm = app.mount("#root");
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
    <title>动画</title>
    <script src= "https://unpkg.com/vue@next"></script>
    <style>
        @keyframes snake {
            0%{
                transform: translateX(-100px);
            }
            50%{
                transform: translateX(-50px);
            }
            100%{
                transform: translateX(50px);
            }
        }
        .v-enter-active{
           animation: snake 3s;
        }
        .v-leave-active{
            animation: snake 3s;
        }

    </style>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    //过渡：一个状态转变为另一个状态
    const app = Vue.createApp({
        data(){
            return{
                show:false,
            }
        },
        methods: {
            handleClick(){
                this.show=!this.show;
            },
            handleBeforeEnter(el){
                el.style.color="red";
            },
            handleEnterActive(el,done){
                const animation = setInterval(()=>{
                    const color = el.style.color;
                    if(color==='red'){
                        el.style.color='green'
                    }else{
                        el.style.color='red'
                    }
                },1000)
                setTimeout(()=>{
                    clearInterval(animation);
                    done();
                },3000)
            },
            handleEnterEnd(el){
                alert(123);
            }

                
        },
        template:`
            <div>
                <transition 
                :css="false"
                @before-enter="handleBeforeEnter"
                @enter="handleEnterActive"
                @after-enter="handleEnterEnd"
                >
                    <div v-show="show">hello world</div>
                </transition>
                <button @click="handleClick">切换</button>
            </div>
        `
    });
    app.component({

    });
   const vm = app.mount("#root");
</script>
</html>