JavaScript+css实现转向灯双闪animationanimation-iteration-countkeyframesinfinite循环动画动画执行无限次

Posted 2022-03-08 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript+css实现转向灯双闪animationanimation-iteration-countkeyframesinfinite循环动画动画执行无限次相关的知识，希望对你有一定的参考价值。

1、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>

2、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];
        
    
);

3、css部分

.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;