如何在反应中旋转元素 180？答案

【问题标题】：How to rotate an element 180 in react?如何在反应中旋转元素 180？
【发布时间】：2021-07-09 03:31:23
【问题描述】：

如何根据状态变量show 将<CaretUpFill/> 图标倒置，但处于过渡状态？我在_rafce。（反应箭头函数组件）

目前，我正在渲染另一个图标<CaretDownFill/>，但它看起来并不流畅。

我想让箭头看起来像这样：


        <div className="col-2 d-flex align-items-center">
          <small>{show ? <CaretUpFill /> : <CaretDownFill />}</small>
        </div>

【问题讨论】：

标签： reactjs jsx css-transitions react-component

【解决方案1】：

使用 css 属性：

transform: rotate(180deg)

我看到您创建了两个元素 - <CaretUpFill /> 和 <CaretDownFill />。

您现在所做的基本上是卸载 <CaretUpFill /> 并安装 <CaretDownFill /> 组件（反之亦然），但据我所知，不可能在两个单独的组件之间创建动画。

因此，我建议只使用一个组件，并使用上面的 css 属性添加动画。

【讨论】：

【解决方案2】：

您可以使用style prop 添加CSS transform 来旋转图标，并使用CSS transition 为过渡设置动画。

const style = {
 transform: show ? 'rotate(180deg)' : '', 
 transition: 'transform 150ms ease', // smooth transition
}

<div className="col-2 d-flex align-items-center">
 <small><CaretUpFill style={style}/></small>
</div>

//if the icon doesn't have access to style props you can add it to the <small> element
<div className="col-2 d-flex align-items-center">
 <small style={style}><CaretUpFill /></small>
</div>

您也可以使用像 Framer Motion 这样的第三方库来为您的组件制作动画 - 但它对您的需求来说太过分了。

【讨论】：

【解决方案3】：

我推荐你 framer-motion 库您可以旋转元素，并进行大量操作。 css 和 framer motion 之间有什么区别？移动它的 js 组件，工作正常

这里是example

【讨论】：

【解决方案4】：

您可以使用 CSS 的“旋转”功能，这是最简单的方法：

style={{ transform: 'rotate(180deg)' }}

【讨论】：