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

一张素材卡，使用react-addons-transition-group的多个动画

1 个答案: