reactjs css transition 如何分开控制不同的动画

在React中，可以使用CSS Transition来控制不同的动画。可以通过在组件的state中定义不同的变量来控制不同的动画效果，然后在CSS中使用这些变量来设置相应的transition属性。

以下是一个示例：

首先，在组件的state中定义两个变量，用于控制不同的动画效果：

import React, { useState } from "react";

const MyComponent = () => {
  const [isAnimating1, setIsAnimating1] = useState(false);
  const [isAnimating2, setIsAnimating2] = useState(false);

  const startAnimation1 = () => {
    setIsAnimating1(true);
  };

  const startAnimation2 = () => {
    setIsAnimating2(true);
  };

  return (
    <div>
      <button onClick={startAnimation1}>Start Animation 1</button>
      <button onClick={startAnimation2}>Start Animation 2</button>

      <div className={`box ${isAnimating1 ? "animation1" : ""}`} />
      <div className={`box ${isAnimating2 ? "animation2" : ""}`} />
    </div>
  );
};

export default MyComponent;

然后，在CSS中定义两个不同的动画效果：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.5s;
}

.animation1 {
  transform: translateX(200px);
}

.animation2 {
  transform: translateY(200px);
}

以上代码中，点击"Start Animation 1"按钮会给第一个<div>元素添加animation1类名，从而触发动画效果；点击"Start Animation 2"按钮会给第二个<div>元素添加animation2类名，从而触发不同的动画效果。

注意：为了实现动画效果，需要在组件中引入CSS文件