Reactjs 如何在react中旋转元件180？

如何根据状态变量

show

将图标倒置，但处于转换状态？我在一个

\u rafce

。（反应箭头功能组件）

目前，我正在渲染另一个图标，但它看起来并不平滑。

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

{显示？：}

使用css属性：

变换：旋转（180度）

我看到您创建了两个元素-

和

您现在所做的基本上是卸载

并装载

组件（反之亦然），但据我所知，不可能在两个单独的组件之间创建动画

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

您可以使用添加a来旋转图标，使用a来设置过渡动画

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>

const style={
变换：显示“旋转（180度）”：，
转换：“转换150ms轻松”，//平滑转换
}
//如果图标无法访问样式道具，可以将其添加到元素中

---

您也可以使用第三方库来设置组件的动画，但这对于您的需要来说太过分了。

我建议您使用framer运动库 您可以旋转图元，并执行许多操作。

css

和

framer-motion

之间有什么区别？运动其js组件，工作正常

这是