Question

基本上，当我从状态中删除一个项目时，或者当我按下按钮时，我想添加动画。我真的很感激你的帮助。谢谢。

const Control = ({close}) => {
const {remove, icons }= useGlobalContext()
    return ( 
        <div className='control'>
          <div className='close__cont'>
            <GrClose className='close' onClick={close} />
            <h3>Control</h3>
          </div>
          <div className='control__cont'>
            {icons.map((unin)=> {            
              const { name, img, id} = unin         
                return (               
                 <li className='control' key={id}>
                  <div className='img__text'> 
                    <img className='control__Img' src={img} />             
                    <h4 className='control__name'>{name}</h4>
                  </div>             
                <button className='unin__button'  onClick={(e) => {
                 e.stopPropagation();
                 remove(id) }}>remove</button>   
              </li> 
               )                                            
          })}         
          </div>             
        </div>                 
    )
}

export default Control

Answer 1

在上面提到的 onclick 函数中的 javascript 中，您可以编写 document.getElementById("unin__button").style.animation ="name for animation, duration, iteration count"。编写时，动画、持续时间和迭代次数之间不需要逗号，而且您必须在 css 中定义动画。

在事件触发器上添加动画

1 个答案: