Vue过渡&循环切换&放大缩小动画

今天药忘吃喽~ 2023-06-05 12:48 11阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue过渡与循环切换和放大缩小</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
    .box {
        margin-left: 150px;
    }
    .box01{
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .box02{
      width: 200px;
      height: 200px;
      background-color: blue;
    }
    .div_transition_text{
        overflow: hidden;
        background-color: pink;
        height: 260px;
        width: 500px;
        text-align: center;
    }
    #animat{
        position:relative;
        animation:mymove 3s infinite;
        animation-direction:alternate;/*轮流反向播放动画。*/
        animation-timing-function: ease-in-out; /*动画的速度曲线*/
        -webkit-animation:mymove 3s infinite; /*Safari and Chrome*/
        -webkit-animation-direction:alternate;/*轮流反向播放动画。*/
        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    }
    @keyframes mymove{
        0%{
            transform: scale(1);  /*开始为原始大小*/
        }
        25%{
            transform: scale(1.2); /*放大1.1倍*/
        }
        50%{
            transform: scale(1);
        }
        75%{
            transform: scale(1.2);
        }
    }
    @-webkit-keyframes mymove{
        0%{
            transform: scale(1);
        }
        25%{
            transform: scale(1.2);
        }
        50%{
            transform: scale(1);
        }
        75%{
            transform: scale(1.2);
        }
    }
    .bounce-enter-active {
      animation: bounce-in 1s;
    }
    .bounce-leave-active {
      animation: bounce-in 1s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(1.5);
      }
      50% {
        transform: scale(1);
      }
      100% {
        transform: scale(1.5);
      }
    }
    .ready_btn {
        height: 35px;
        width: 100px;
        background: blue;
        text-align: center;
        line-height: 35px;
        margin-left: 200px;
        margin-top: 50px;
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity 1s
    }
    .fade-enter, .fade-leave-to {
        opacity: 0
    }
    </style>
    </head>
    <body>
    <div id = "databinding">
        <div class="div_transition_text">
            <transition name = "fade">
                <div v-show = "show1" :style = "styleobj">111111111111111111111111</div>
            </transition>
            <transition name = "fade">
                <div v-show = "show2" :style = "styleobj">222222222222222222222222</div>
            </transition>
            <transition name = "fade">
                <div v-show = "show3" :style = "styleobj">333333333333333333333333</div>
            </transition>
            <transition name = "fade">
                <div v-show = "show4" :style = "styleobj">444444444444444444444444</div>
            </transition>
        </div>
        <div v-show='showDoctor' class='box box01'></div>
        <div v-show='!showDoctor' class='box box02'></div>
        <transition name="bounce">
            <div v-show="show" class="ready_btn" id="animat">我准备好了!</div>
        </transition>
    </div>
    <script type = "text/javascript">
    new Vue({
        el: '#databinding',
        data: {
            myInterval: '',
            showDoctor: true,
            show: true,
            show1: false,
            show2: false,
            show3: false,
            show4: false,
            styleobj :{
                'fontSize':'30px',
                'color':'red',
                'margin-top': '20px',
                'margin-bottom': '20px'
            }
        },
        created() {
            this.myInterval = setInterval(() => {
                this.showDoctor = !this.showDoctor;
            },1000);
    　　　　 // 利用Promise对象的特性，保证动画链式显示
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    this.show1 = true;
                    resolve();
                }, 600);
            }).then(() => {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        this.show2 = true;
                        resolve();
                    }, 600);
                }).then(() => {
                    return new Promise((resolve, reject) => {
                        setTimeout(() => {
                            this.show3 = true;
                            resolve();
                        }, 600);
                    }).then(() => {
                        return new Promise((resolve, reject) => {
                            setTimeout(() => {
                                this.show4 = true;
                            }, 600);
                        })
                    })
                })
            });
        }
    })
    </script>
    </body>
    </html>

转载于:https://www.cnblogs.com/penghewen-cnblogs/p/11468508.html