つの材料カード、反応-アドオン遷移基

Question

を使用して複数のアニメーションは、私は材料-UIから<Card>成分を有します。それはCardHeader、CardTextとカード全体を作るために集まる他の部分を持っています。

私はそれが画面（componentWillEnter）に入ると、このカードをアニメーション化するreact-addons-transition-groupを使用することができています。そして、上記のようにのように、別のコンポーネントでレンダリングされる

export class MyCard extends React.Component { 
    constructor(props) { 
     super(props); 
     } 

    componentWillEnter (callback) { 
    const el = findDOMNode(this); 
    TweenMax.fromTo(el, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback}); 
    } 

render(){ 

    return <Card> 
       <h1> Blah Blah Title <h1> 
       <CardText> Blah Blah </CardText> 
       </Card> 
    } 
} 

：これはで素晴らしい作品ReactTransitionGroupでラップ

<ReactTransitionGroup> <MyCard> </ReactTransitionGroup> 

はそれが呼び出されるcomponentWillEnter、およびアニメーションの実行を呼び出して確認します。これは期待どおりに動作します。私がやりたい何

は、複数のアニメーションです。それで、カードは左から来て、CardTextは上から来て、右からh1が来ます。

理想的には、私はちょうどのようなものだろう：もちろん

componentWillEnter (callback) { 
     const el = findDOMNode(Card); 
     const el = findDOMNode(h1); 
     const el = findDOMNode(CardText); 

     TweenMax.fromTo(Card, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback}); 

TweenMax.fromTo(h1, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback}); 

TweenMax.fromTo(CardText, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback}); 
     } 

を、これは動作しません。

私の質問は、個々の部品をアニメーション化できるように、コンポーネントのthisインスタンスを解析するにはどうすればいいですか？

私は本当にfindDOMNodeの多くを見つけることができませんでした。 idタグを別の部分に追加して、findDOMNodeのIDタグを使用することはできません。あるいは、私はそれについてすべて間違っていると思います。

Answer 1

答えを見つけました！単純にuse refsこのオブジェクトでそれらにアクセス：だから

：

render(){ 

    return <Card ref="card"> 
       <h1 ref="title"> Blah Blah Title <h1> 
       <CardText ref="text"> Blah Blah </CardText> 
       </Card> 
    } 

は次に、あなたのようなアニメーション部分でそれらを参照します。

export class MyCard extends React.Component { 
     constructor(props) { 
      super(props); 
      } 

     componentWillEnter (callback) { 
     const card = findDOMNode(this); 
     const title = findDOMNode(this.refs.title); 
     const description = findDOMNode(this.refs.description); 

     TweenMax.fromTo(card, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback}); 
     TweenMax.fromTo(title, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback}); 
     TweenMax.fromTo(description, 0.4, {y: 100, opacity: 0}, {y: 0, opacity: 1, onComplete: callback}); 
     } 

    render(){ 

     return <Card> 
        <h1 ref="title"> Blah Blah Title <h1> 
        <CardText ref="text"> Blah Blah </CardText> 
        </Card 
     } 
    } 

あなたはもちろんのタイミングを異なるしたいと思いますそれぞれのTweenMax.fromTo呼び出しのアニメーションがそれを行う必要があります！

文字列のリファレンスが廃止される可能性があるので、それ以上の読み方を追加する価値はあると思いますか？ハード伝えるために：

https://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html#pending-change-the-refs-semantics

https://twitter.com/dan_abramov/status/664212109056729088