使用React-Motion旋转和缩放

Question

在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>

但是,如何使用更复杂的css属性(例如' transform:rotate(90deg) ')来完成上述操作？

最后,如果我想要更复杂的状态逻辑,例如在翻转和转出时发生的动画,如果各种状态为真或假,哪里最好这样做？在使用React Motion之前,我根据状态和一些条件更新了元素的内联样式,我现在还不确定如何使用React Motion.你的想法会受到欢迎!:d

t xx

Answer 1

对于rotate&scale您可以使用标记的模板文字 ${ expresion }.

让我演示给你看

<Motion
  defaultStyle={{ rotate: 0, scale: 1}}
  style={{ rotate: spring(180), scale: spring(3)}}
>

  {style => 
    (
      <div style={{ 
       transform: `rotate( ${style.rotate}deg )`,
       transform: `scale( ${style.scale}, ${style.scale} )`
     }}> </div>    
    )
  }

</Motion>

注意使用反引号

对于交互式动画,React非常善于访问DOM并使用包含鼠标事件的 SyntheticEvents .

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp

这是一个鼠标悬停示例使用setState

import React, { Component } from 'react'
import { Motion, spring } from 'react-motion'

class App extends Component { 
  state = {
   rotate: 0
  }
  enter(){
    this.setState({rotate: 180})
  }
  leave(){
    this.setState({rotate: 0})
  }
  render(){
    return (
      <Motion
        defaultStyle={{ rotate: 0}}
        style={{ rotate: spring(this.state.rotate)}}
      >

       {style => 
         (
           <div 
             style={{ 
               transform: `rotate( ${style.rotate}deg )`,
             }}
             onMouseEnter={this.enter.bind(this)}
             onMouseLeave={this.leave.bind(this)}
           > </div>    
         )
        }

      </Motion>
     )
  }
}
export default App

现在这不会显示任何东西,因为没有预先定义的尺寸div.要做到这一点,让我们声明styles对象.

下面的import线

const styles = {
  div: {
    height: 100,
    width: 100,
    backgroundColor: 'papayawhip'
  }
}

然后你可以像这样使用它:

style={ Object.assign( {},
  styles.div,
  { 
    transform: `rotate( ${style.rotate}deg )`,
    // more styles here...
  })
}