Css 通过反作用运动进行旋转和缩放

在React Motion v4中，我正努力让自己的头绕过“旋转”和“缩放”，似乎找不到太多关于如何在线操作的信息。更改一个简单的css属性和一个简单的状态更改很容易，如下所示：

<Motion 
 defaultStyle={{opacity: 0}}
 style={{opacity: spring(this.state.isActive ? 1 : 0, {stiffness: 200, damping: 12})}}>
 {style => 
  <div style={{opacity: style.opacity}} className="action-panel">
   <div id="action-content" className="action-panel-content"></div>
  </div>
 }                            
</Motion>

{style=>
}                            

但是，如何使用更复杂的css属性（例如“变换：旋转（90度）”）执行上述操作

最后，如果我想有更复杂的状态逻辑，比如滚动和滚动时发生的动画，如果各种状态为真或假，最好在哪里做？在使用React-Motion之前，我根据元素的状态和一些条件更新了元素的内联样式，现在我不确定如何使用React-Motion来实现这一点。欢迎你的想法D

---

t xx

对于

旋转

和

缩放

可以使用

${expresion}

让我给你看看

{style=>
(
)
}

注意反勾号的使用

对于交互式动画，React在访问DOM方面非常出色，并使用了包含的事件

onClick oncentext菜单ondouble单击onDrag onDragEnd onDragEnd onDragEnter
onDragExit ONDRAGLEFT onDragOver onDragStart onDrop ONMOUSE DOWN
onmouse输入onmouse离开onmouse移动onMouseOut onMouseOver onMouseUp

下面是一个使用

setState

import React，{Component}来自“React”
从“反应运动”导入{Motion，spring}
类应用程序扩展组件{
状态={
轮换：0
}
输入（）{
this.setState（{rotate:180}）
}
离开{
this.setState（{rotate:0}）
}
render（）{
返回(
{style=>
(
)
}
)
}
}
导出默认应用程序

现在不会显示任何内容，因为

div

没有预定义的维度。为此，让我们声明

style

对象

在

导入

行下方

const styles={
分区：{
身高：100，
宽度：100，
背景颜色：“木瓜鞭”
}
}

然后您可以这样使用它：

style={Object.assign（{}，
styles.div，
{ 
变换：`rotate（${style.rotate}deg）`，
//这里有更多款式。。。
})
}

对特定产品/资源的过度促销可能会被社区视为垃圾邮件。看一看，特别是最后一部分：避免公开的自我推销。您可能也对感兴趣。感谢您删除它。实际上我回去编辑我的答案了。