如何在React中为指定元素添加slideIn动画？

方案一：纯CSS动画（最适合新手） #

直接用CSS定义动画，绑定到目标元素即可：

1. 在CSS文件或style标签中添加动画关键帧：

@keyframes slideIn {
  from {
    transform: translateX(-100%); /* 从左侧滑入，可改为translateY实现上下滑动 */
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slikea {
  animation: slideIn 0.5s ease-out forwards;
  /* forwards确保动画结束后保持最终状态 */
}

2. JSX无需大幅修改，保持原有结构：

<div className="gradient2">
   <div className="grid grid-rows-3 stoljpi-metci grid-flow-col">
      <div className="font-bold text-white pl-1.5 bojaTexta">&nbsp;{metciTren}</div>
      <div className="font-bold text-gray-400 -mt-1">&nbsp;{clipMetci}</div>
   </div>
   <div className='slikea'>
      <img className="stoljpi mt-1" src={`${process.env.PUBLIC_URL}/images/${state}.png`} />
   </div>
</div>

方案二：React Transition Group（适合状态切换触发动画） #

如果需要根据组件状态（比如显示/隐藏）控制动画，可使用这个库：

1. 先安装依赖：

npm install react-transition-group

2. 导入组件并修改代码：

import { CSSTransition } from 'react-transition-group';

// 组件内使用：
<div className="gradient2">
   <div className="grid grid-rows-3 stoljpi-metci grid-flow-col">
      <div className="font-bold text-white pl-1.5 bojaTexta">&nbsp;{metciTren}</div>
      <div className="font-bold text-gray-400 -mt-1">&nbsp;{clipMetci}</div>
   </div>
   <CSSTransition
      in={true} // 可替换为你的状态变量，比如isVisible
      timeout={500}
      classNames="slide"
      unmountOnExit
   >
      <div className='slikea'>
         <img className="stoljpi mt-1" src={`${process.env.PUBLIC_URL}/images/${state}.png`} />
      </div>
   </CSSTransition>
</div>

3. 添加对应的CSS类：

.slide-enter {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: all 0.5s ease-out;
}
.slide-exit {
  transform: translateX(0);
  opacity: 1;
}
.slide-exit-active {
  transform: translateX(-100%);
  opacity: 0;
  transition: all 0.5s ease-out;
}

方案三：Tailwind CSS适配（如果项目用了Tailwind） #

从代码中的grid类判断你可能用了Tailwind，可自定义动画直接使用：

1. 在tailwind.config.js中添加自定义动画配置：

module.exports = {
  theme: {
    extend: {
      animation: {
        'slide-in': 'slideIn 0.5s ease-out forwards',
      },
      keyframes: {
        slideIn: {
          'from': {
            transform: 'translateX(-100%)',
            opacity: '0',
          },
          'to': {
            transform: 'translateX(0)',
            opacity: '1',
          },
        },
      },
    },
  },
}

2. 给目标元素添加动画类：

<div className='slikea animate-slide-in'>
  <img className="stoljpi mt-1" src={`${process.env.PUBLIC_URL}/images/${state}.png`} />
</div>

内容的提问来源于stack exchange，提问作者whereiam