Javascript 反应：当组件首次装入时，停止已设置样式的组件动画的运行

我有一个

样式化组件

，它接收道具以确定要使用的动画。这是控制一个箭头图标，当处于活动状态时旋转“打开”，当处于非活动状态时保持“关闭”

以下是

样式化组件

和两个

关键帧

动画的外观：

const rotate_down = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(90deg);
  }
`;

const rotate_up = keyframes`
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(0deg);
  }
`;

const OpenUserSettings = styled.div`
  cursor: pointer;
  width: 20px;
  height: 20px;
  transition: 0.3s;
  animation: ${props => (props.rotate ? rotate_down : rotate_up)} 0.5s ease
    forwards;
  margin-top: 2px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  & > img {
    width: 5px;
  }
`

传入的

rotate

prop是一个布尔值，可通过React组件中的

onClick

处理程序进行切换：

    <OpenUserSettings
      rotate={arrowDown}
      onClick={() => {
        this.setState(prevState => ({
          arrowDown: !prevState.arrowDown
        }));
      }}
    >
      <img src={OpenArrow} alt="menu drop down arrow" />
    </OpenUserSettings>

{
this.setState（prevState=>({
箭头向下：！prevState.arrowDown
}));
}}
>

这是可行的，当单击箭头时，

rotate

道具被传递到

OpenUserSettings

中，它成功地在

向上旋转

和

向下旋转

关键帧之间切换

现在我的问题是，当React组件首次安装时，

arrowDown

默认设置为false，这意味着

rotate

道具将为false。这会导致

样式化组件

在第一次安装时将动画设置为

向上旋转

。我想这很难想象，所以请查看以下内容以了解我所描述的内容：

---

您可以看到当页面刷新时，

rotate\u up

动画将快速启动。我需要箭头保持关闭，但我不需要在首次加载时触发

向上旋转

动画来关闭它。这是类似于

react transition group

的情况，我可以控制初始输入，还是可以用逻辑处理

我认为在这里使用CSS

转换

/

转换

比使用

动画

更容易。代码如下：

const rotateDeg = props.rotate ? '90deg' : '0deg';

const OpenUserSettings = styled.div`
  cursor: pointer;
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
  transform: rotate(${rotateDeg});
  margin-top: 2px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  & > img {
    width: 5px;
  }
`

我不太明白您希望箭头处于什么位置，因此您可能需要将

0deg

和

90deg

折叠起来，我认为它实际上可能是

-90deg

，但希望这会有所帮助

编辑

您的问题实际上是如何停止动画。您可以使用

动画播放状态

暂停css动画。在这种情况下，您可以使用

动画播放状态：暂停安装组件

然后添加了一个额外的道具，在第一次单击时将其更改为运行，但这似乎不必要地复杂

---

我认为在这里使用CSS

转换

/

转换

比使用

动画

更容易。代码如下：

const rotateDeg = props.rotate ? '90deg' : '0deg';

const OpenUserSettings = styled.div`
  cursor: pointer;
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
  transform: rotate(${rotateDeg});
  margin-top: 2px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  & > img {
    width: 5px;
  }
`

我不太明白您希望箭头处于什么位置，因此您可能需要将

0deg

和

90deg

折叠起来，我认为它实际上可能是

-90deg

，但希望这会有所帮助

编辑

您的问题实际上是如何停止动画。您可以使用

动画播放状态

暂停css动画。在这种情况下，您可以使用

动画播放状态：暂停安装组件

然后添加了一个额外的道具，在第一次单击时将其更改为运行，但这似乎不必要地复杂

---

我对堆栈溢出的第一个贡献，多么令人兴奋

为了确保动画不会在装载时渲染，请使用其他值初始化状态为true/false，我记得最初将我的状态设置为null

在您的样式化组件中，您可以将null/true/false作为一个道具传递，并在组件外部定义一个函数来检查null/true/false。（我使用了TypeScript，所以不要复制类型）

在样式化组件中，只需添加一行：

${(props: PropsDisplay) => show(props.show)};

我就是这样做的，我相信还有更优雅的方式，但它确实做到了在安装时预先制作动画的技巧

作为回报，如果有人知道如何在我在这里使用的函数（来自上面的示例）的返回中获得样式化组件语法高亮显示：

一定要让我知道！在找那个！谢谢你，祝你好运

---

继续制作动画！：）

我对堆栈溢出的第一个贡献，多么令人兴奋

为了确保动画不会在装载时渲染，请使用其他值初始化状态为true/false，我记得最初将我的状态设置为null

在您的样式化组件中，您可以将null/true/false作为一个道具传递，并在组件外部定义一个函数来检查null/true/false。（我使用了TypeScript，所以不要复制类型）

在样式化组件中，只需添加一行：

${(props: PropsDisplay) => show(props.show)};

我就是这样做的，我相信还有更优雅的方式，但它确实做到了在安装时预先制作动画的技巧

作为回报，如果有人知道如何在我在这里使用的函数（来自上面的示例）的返回中获得样式化组件语法高亮显示：

一定要让我知道！在找那个！谢谢你，祝你好运

继续制作动画！：）