如何在react中旋转元素180？
如何在react中旋转元素180？
提问于 2021-04-14 12:50:11
如何根据状态变量show将图标旋转为颠倒状态，但处于过渡状态？我在_rafce里。(react箭头功能组件)
目前，我正在渲染另一个图标<CaretDownFill/>，但它看起来不平滑。
我想让箭头看起来像这样：
<div className="col-2 d-flex align-items-center">
<small>{show ? <CaretUpFill /> : <CaretDownFill />}</small>
</div>回答 4
Stack Overflow用户
回答已采纳
发布于 2021-04-14 13:14:24
可以使用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这样的第三方库来动画化你的组件--但是这对于你的需求来说有点过分了。
Stack Overflow用户
发布于 2021-04-14 12:57:20
使用css属性：
transform: rotate(180deg)
我看到您已经创建了两个元素- <CaretUpFill />和<CaretDownFill />。
您现在所做的基本上是卸载<CaretUpFill />并挂载<CaretDownFill />组件(反之亦然)，但据我所知，不可能在两个单独的组件之间创建动画。
因此，我建议只使用一个组件，并使用上面的css属性添加动画。
Stack Overflow用户
发布于 2021-04-15 21:31:25
我推荐你框架动作库，你可以旋转元素，做很多操作。css和framer motion之间有什么区别？移动其js组件，工作正常。
这是example
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67085701
复制相关文章
相似问题
腾讯云开发者
