3

努力让我的头在 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

txx

4

1 回答 1

7

对于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...
  })
}
于 2017-05-31T07:23:14.220 回答