javascript - 为什么我的 CSS 动画没有应用于正确的元素？

Question

我正在尝试编写一个 CSS 动画，当有人点击该元素时(就像删除它一样)它会被激活。元素被渲染为 map 的一部分，所以有点复杂。我以前没有这样做过，如果它很愚蠢，我很抱歉，这就是我尝试做的。

下面的代码目前发生了什么:当我点击某物时，正确的元素就消失了(没有任何动画)，但数组中的下一个元素确实收到动画然后重新出现。但有时动画根本不显示。为什么动画传递到错误的元素？

这是我渲染不同元素的 map 。请注意，我正在为每个 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"
}

Aaaaa 这是出现在我的 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
                })
            })         
        } 
    }
}