は回転して反応モーション

Question

「を回転さ」とで「がスケーリング」私の頭のラウンドを得るのに苦労してスケーリングは、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プロパティで上記を行うのですか。例えば「変換回転（90deg）」 ？

最後に、ロールオーバーとロールアウトで発生するアニメーションや、さまざまな状態が真であるか偽であるかなど、より複雑な状態ロジックを作成したい場合は、そのときに最適です。 React Motionを使用する前に、その状態といくつかの条件に基づいて要素のインラインスタイルを更新していましたが、今はReact Motionだけを使ってこれをどうやって行うのか分かりません。あなたの考えは歓迎されるだろう！ ：D

トンxxの

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> 

予告インタラクティブなアニメーションのためにバッククォート

の使用をお見せリアクトせはDOMにアクセスするには非常に良好であり、Mouse Eventsが含まSyntheticEventsを使用しています。

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

はここdivのない事前に定義された寸法がないので、今、これは何も表示されません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 

を使用してマウスホバー例です。これを行うには、stylesオブジェクトを宣言しましょう。

importライン

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

以下

そうのような、あなたがそれを使用することができます。特定の製品/リソースの

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