react循环 条件判断 搭配css

主要代码

let { egglist,styleObject2 } = this.state
        return (
            <div>
                <div className='app'>
                    <div className='eggbox'>
                        {
                            egglist.map((item, i) => 
                                <div key={i} className={ `egg ${item.id===1?'egg1':''}${item.id===2?'egg2':''}${item.id===3?'egg3':''}`} style={ styleObject2 }>
                                    { item.showegg1?<img className='egg-img' src={ egg1img } alt='egg'></img>:null }
                                    { item.showegg2?<img className='egg-img' src={ egg2img } style={{width: '100%'}} alt='egg'></img>:null }
                                    { item.showegg3?<img className='egg-img' src={ egg3img } style={{width: '100%'}} alt='egg'></img>:null }
                                    { item.showhammer?<img className='hammer' src={ icon1img } style={{width: '1.5rem'}}  alt='egg'></img>:null }
                                </div>
                            )
                        }
                        
                    </div>
                </div>
            </div>
        );

部分css

.stopanimate{
	animation-play-state: paused;
    -webkit-animation-play-state: paused;
}
.egg1{
    left: 1.65rem;
	-webkit-animation:egg_move_1 4s linear 0s infinite normal forwards;
    animation:egg_move_1 4s linear 0s infinite normal forwards;
}
.egg2{
	right: -40px;
	/*top: 10px;*/
	-webkit-animation:egg_move_2 4s linear 0s infinite normal forwards;
    animation:egg_move_2 4s linear 0s infinite normal forwards;
}
.egg3{
	left: -30px;
	/*top: 10px;*/
	-webkit-animation:egg_move_3 4s linear 0s infinite normal forwards;
    animation:egg_move_3 4s linear 0s infinite normal forwards;
}