Вращение и масштабирование с помощью 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

т хх

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...
  })
}