使用 React-Motion 旋转和缩放

Question

努力在 React Motion v4 中解决“rotating”和“scaling”问题，但似乎无法找到很多关于如何在线完成。更改简单的 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

Answer 1

对于 rotate & scale 你可以使用 tagged template literals ${ 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 并使用包括 Mouse Events.

的 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 旋转和缩放

Rotating and Scaling with React-Motion

css

reactjs

react-motion