为什么我的CSS动画不适用于正确的元素？

Question

我正在尝试编写一个CSS动画，当某人单击该元素时将其激活（好像将其删除）。 元素被渲染为地图的一部分，因此有点复杂。 我以前没有做过，所以很抱歉，这是我试图做的。

当前的代码如下所示：当我单击某些内容时，正确的项目就会消失（没有任何动画），但是数组中的下一个元素确实会接收到动画，然后重新出现。 但是有时动画根本不显示。 为什么动画通过错误的元素？

这是我渲染不同元素的地图。 注意，我正在为每个sport.name创建一个ID。

this.state.sports.map((sport) => {    
      let imgPath = " ";
      if(/\s/g.test(sport.name.toLowerCase())){                                        
         imgPath = 'images/' + sport.name.replace(/\s/g, '').toLowerCase() + '.png'
         } else {
         imgPath = 'images/' + sport.name.toLowerCase() + '.png'
         }                   
         return(
            <div>
              <button className="sport-button" id={sport.name} onClick={() => this.deleteSport(sport.name)}>
                 <img src={imgPath} className="sport-image" /> 
                    {sport.name}
              </button>                         
            </div>
           )   
         })

这是我拥有的deleteSport函数，当前是onClick处理程序。 在其中，我调用了另一个名为exitAnimation的函数。

deleteSport = (name) => {
    for(let i of this.state.sports){
        if(i.name === name){
            let stateCopy = this.state.sports.filter(sport => sport.name !== i.name)            
            this.exitAnimation(name)
            console.log(name)
            this.setState({
                sports: stateCopy
            })            
        } 
    }
}

这是被调用的exitAnimation函数...

exitAnimation = (name) => {
    document.getElementById(name.toString()).style.animation = "deleteAnimation 2s"
}

这是出现在我的CSS样式表中的CSS动画...

@keyframes deleteAnimation {
  from { opacity: 1; 
  }
   to { opacity: 0; 
  }        
}

Answer 1

您要在动画完成之前删除项目。 参见修改。

deleteSport = (name) => {
    for(let i of this.state.sports){
        if(i.name === name){
            const stateCopy = this.state.sports.filter(sport => sport.name !== i.name)            
            return this.exitAnimation(name, name => {
                this.setState({
                    sports: stateCopy
                })
            })         
        } 
    }
}

exitAnimation = (name, cb) => {
    document.getElementById(name.toString()).style.animation = "deleteAnimation 2s"
    // called when animation completes after 2s
    setTimeout(() => cb(name), 2000)
}

请注意，这里我们仅等待2秒。 通常，您可以使用动画库来实际告诉您动画何时完成。

更新：

尝试将stateCopy移到exitAnimation回调中。 stateCopy和exitAnimation之间可能存在竞争条件

deleteSport = (name) => {
    for(let sport of this.state.sports){
        if(sport.name === name){
            return this.exitAnimation(name, name => {
                const sports = this.state.sports.filter(sport => sport.name !== name)
                this.setState({
                    sports: sports
                })
            })         
        } 
    }
}