動畫實現-微信語音小喇叭樣式

主要實現了點擊喇叭可實現動畫效果，再次點擊可靜止。

React中，

jsx部分：設置喇叭基本樣式，以及觸發事件等。

　　　　關於className的解釋：關於是否點擊按鈕，來判斷喇叭展示的樣式。（鄙人能力不夠，只能通過這種方法控制）

this.state = {

　　btnStatus: true,

}

 

changeBtn(){

　　this.setState({

　　　　btnStatus: !this.state.btnStatus, //設置按鈕點擊事件，該彬啊btnStatus的狀態

　　})

}

<div className={ btnStatus ? 'static' : 'wave' } onClick={this.changeBtn.bind(this)}> 
     <div className="wifi-circle first"></div>
     <div className="wifi-circle second"></div>
     <div className="wifi-circle third"></div>
</div>

 

css部分：最重要設置樣式，主要利用transition動畫，同時還有三個小圓弧該如何書寫。

.wave {
        width: 40px;
        height: 40px;
        box-sizing: border-box;                
        position:relative;  
        overflow: hidden;
        transform: rotate(135deg);
        .wifi-circle {
            border: 4px solid #FFF;
            border-radius: 50%;
            position: absolute;
        }
        .first {
            width: 5px;
            height: 5px;
            background: rgb(51, 50, 50);
            top: 35px;
            left: 35px;
        }
        .second {
            width: 25px;
            height: 25px;
            top: 25px;
            left: 25px;
        }
        .third {
            width: 40px;
            height: 40px;
            top: 15px;
            left: 15px;
        }
    }

//不同之處在於，是否有keyframes動畫效果的顯現。
.static{
        width: 40px;
        height: 40px;
        box-sizing: border-box;                
        position:relative;  
        overflow: hidden;
        transform: rotate(135deg);
        .wifi-circle {
            border: 4px solid #FFF;
            border-radius: 50%;
            position: absolute;
        }
        @keyframes fadeInOut {
            0% {
                opacity: 0; /*初始狀態 透明度為0 */
            }
            100% {
                opacity: 1; /*結尾狀態 透明度為1 */
            }
        }
        .first {
            width: 5px;
            height: 5px;
            background: rgb(51, 50, 50);
            top: 35px;
            left: 35px;
        }

        .second {
            width: 25px;
            height: 25px;
            top: 25px;
            left: 25px;
            animation: fadeInOut 1s infinite 0.2s;
        }

        .third {
            width: 40px;
            height: 40px;
            top: 15px;
            left: 15px;
            animation: fadeInOut 1s infinite 0.4s;
        }
    }

代碼有極大冗余，但不知如何簡化，請教一波。