如何在React中将元素旋转180？

Question

如何<CaretUpFill/>根据状态变量将图标旋转为上下颠倒show，但处于转换状态？我在一个_rafce. （反应箭头函数组件）

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

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

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

Answer 1

您可以使用style 属性添加CSS 变换来旋转图标，并使用CSS 过渡来为过渡设置动画。

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等第三方库来为您的组件设置动画 - 但这对于您的需求来说有点过分了。