如何在react中旋转元素180？
如何在react中旋转元素180？
提问于 2021-04-14 04: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 05: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 04:57:20
使用css属性：
transform: rotate(180deg)
我看到您已经创建了两个元素- <CaretUpFill />和<CaretDownFill />。
您现在所做的基本上是卸载<CaretUpFill />并挂载<CaretDownFill />组件(反之亦然)，但据我所知，不可能在两个单独的组件之间创建动画。
因此，我建议只使用一个组件，并使用上面的css属性添加动画。
Stack Overflow用户
发布于 2021-04-15 13:31:25
我推荐你框架动作库，你可以旋转元素，做很多操作。css和framer motion之间有什么区别？移动其js组件，工作正常。
这是example
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67085701
复制相关文章
![pycharm python解释器找不到,pycharm找不到解释器怎么办[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/fff501b6e32d21b0594292f469c4f28e.jpg)
![[754]ImportError: DLL load failed: 找不到指定的模块](https://ask.qcloudimg.com/http-save/yehe-4908043/wfbvwa8fo5.jpeg)
![模块已加载,但找不到入口点DLLRegisterServer[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-1011815/6f61102a6e48b89084e8fd77fe248277.png)
相似问题
删除所有包含Year != Pandas的行
包含列表中所有值的Pandas DataFrame行
从pandas中的DataFrame中删除包含所有NaN的行
删除Pandas中包含某些字符串列表的行
从Pandas DF中删除包含列表中元素的行
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
