一個材料卡，使用react-addons-transition-group的多個動畫

Question

我從material-ui獲得了一個<Card>組件。它有一個CardHeader，CardText和其他部分組合在一起製作整個卡片。

我可以使用react-addons-transition-group爲它進入屏幕（componentWillEnter）時爲其製作動畫。

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> <MyCard> </ReactTransitionGroup> 

結束語在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中的標籤。或者，也許我正在全力以赴。

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