JavaScript+Css实现转向灯、动画执行无限次、循环动画、双闪、animationIterationCount、animation、keyframes、infinite

本文链接：https://blog.csdn.net/weixin_51157081/article/details/123292468

Html

<div id="app">
    <div class="box">
        <div class="lamp-box">
            <span v-if="leftLamp">←</span>
            <span v-if="doubleFlash">←→</span>
            <span v-if="rightLamp">→</span>
        </div>

        <div class="button-box">
            <el-button type="success" @click="clickButton('leftLamp')">左转</el-button>
            <el-button type="danger" @click="clickButton('doubleFlash')">双闪</el-button>
            <el-button type="success" @click="clickButton('rightLamp')">右转</el-button>
        </div>
    </div>
</div>

JavaScript

new Vue({
    el: "#app",
    data() {
        return {
            leftLamp: false,
            doubleFlash: false,
            rightLamp: false
        }
    },

    methods: {
        clickButton(type) {
        	// 关闭
            if (this[type]) {
                this[type] = false;
                return false;
            }
            
            this.leftLamp = false;
            this.doubleFlash = false;
            this.rightLamp = false;
            this[type] = !this[type];
        }
    }
});

Style

.box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lamp-box,
.button-box {
    border: 1px solid #777;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 130px;
    margin-top: 20px;
}

.lamp-box>span {
    font-size: 60px;
    font-weight: 600;
    animation-name: myfirst;
    animation-duration: 1s;
    /* 
     * 播放动画的次数
     * infinite 无限次
     */
    animation-iteration-count: infinite;
}

@keyframes myfirst {
    0% {
        color: #ff0000;
    }

    100% {
        color: transparent;
    }
}