反应动画内联样式答案

【问题标题】：React animation inline styling反应动画内联样式
【发布时间】：2022-11-12 04:43:37
【问题描述】：

我正在练习 React 内联动画样式。我做了一个切换按钮，当用户第一次按下按钮时，我想从左到右弹出动画卡片。当用户第二次按下按钮时，它将从右到左关闭卡。我想了解动画是如何工作的内联反应样式。不幸的是，我无法做到这一点。似乎 React 内联样式、转换和翻译对我不起作用。 This is the animation I want to do it。我在code-sandbox 中分享了我的代码。

这是我的代码

import { useState } from "react";

export default function App() {
  const [toggle, setToggle] = useState(false);
  return (
    <>
      <button onClick={(): void => setToggle(!toggle)}>toogle button</button>
      {toggle && (
        <div
          style={{
            display: "flex",
            zIndex: 1,
            marginLeft: 170,
            background: "red",
            width: 200,
            height: 300,
            opacity: 1,
            backgroundColor: "tomato",
            transition: "opacity 5s"
          }}
        >
          <p style={{ margin: "0px" }}>animation</p>
        </div>
      )}
    </>
  );
}

【问题讨论】：

您可以使用 ReactTransitionGroup 制作您自己的组件，该组件与 ReactCSSTransitionGroup 做的事情相同，但具有内联样式。

标签： css reactjs animation

【解决方案1】：

我认为这不是一个好主意，但这是一个解决方案。你可以控制一切。

 import "./styles.css";
    
    import { useState } from "react";
    
    export default function App() {
      const transitions = ["linear", "ease", "ease-in", "ease-out", "ease-in-out"];
      const [opacity, setOpacity] = useState(0);
      const [right, setRight] = useState(40);
      const speed = 0.5;
    
      return (
        <>
          <button
            onClick={() => {
              setOpacity(opacity ? 0 : 1);
              setRight(prev => prev === 40 ? 20 : 40);
            }}
          >
            toogle button
          </button>
          <div
            style={{
              display: "flex",
              zIndex: 1,
              marginLeft: 170,
              background: "red",
              width: 200,
              height: 300,
              opacity,
              backgroundColor: "tomato",
              transition: `all ${transitions[1]} ${speed}s`,
              transform: `translateX(-${right}%)`
            }}
          >
            <p style={{ margin: "0px" }}>animation</p>
          </div>
          )
        </>
      );
    }

【讨论】：

【解决方案2】：

您可以使用内联样式，但如果不使用 CSS 或第三方库为您制作动画，您将无法实现所需的行为。

我建议你看看这个：https://www.w3schools.com/css/css3_animations.asp

我看到的另一个问题：

仅当“toggle”属性为真时才显示内容，但对于动画，您需要在标记中具有不同的状态才能转换到不同的动画状态。

例如。

<div className="opening">
<div className="opened">
<div className="closing">
<div className="closed">（或从 DOM 中删除）
然后，您可以使用相应的 CSS 选择器将 CSS @keyframes 应用于所有不同的阶段。

或者，如果您不想自己深入研究 CSS。您可以使用例如这个库来做这项工作：https://react-spring.dev/

【讨论】：