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＆amp; scale您可以使用http://www.dotnetcurry.com/magazine/ ${ 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并使用包含tagged template literals的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...
  })
}

使用React-Motion进行旋转和缩放

1 个答案: