Question

我很难让动画在React中工作。也许有一些我从根本上缺失的东西。

我在coffeescript中这样做 - 我希望你不介意。

我创建了一个非常简单的UI。这是一个带有标题的div。单击标题时，标题会更改，我想使用VelocityJS为淡入/淡出过渡设置动画。

ReactTransitionGroup = React.createFactory(React.addons.CSSTransitionGroup)

{div} = React.DOM

TitleClass = React.createClass
  displayName: "Title"
  render: ->
    (div {onClick:@props.changeTitle}, @props.title)

  componentWillEnter: (done) ->
    node = @getDOMNode()
    console.log "willEnter"
    Velocity(node, 'transition.fadeIn', {complete: done})

  componentWillLeave: (done) ->
    node = @getDOMNode()
    console.log "willLeave"
    Velocity(node, 'transition.fadeOut', {complete: done})


Title = React.createFactory(TitleClass)

MainClass = React.createClass
  displayName: "Main"
  getInitialState: ->
    title: 'Main'
  changeTitle: ->
    if @state.title is 'Home'
      @setState {title: 'Main'}
    else
      @setState {title: 'Home'}
  render: ->
    (div {style:{width: '100%', fontSize:'25px', textAlign:'center', marginTop:'20px'}},
      (ReactTransitionGroup {transitionName: 'fade'},
        (Title {changeTitle:@changeTitle, title:@state.title})
      )
    )

Main = React.createFactory(MainClass)

React.render(Main({}), document.body)

就这样吧。非常自我解释。这个ReactTransitionGroup对我来说仍然是一个谜。我的理解是，它的任何一个孩子都应该接到componentWillEnter和componentWillLeave的电话，但这并不会最终发生。 According to the docs似乎我应该看到console.log "willEnter"，但我不会。

我已经挂了好几个小时了。有什么想法吗？

Answer 1

我可以在上面的代码中看到两个问题。

第一个是您使用的是React.addons.CSSTransitionGroup而不是React.addons.TransitionGroup。

第二个问题是，当实际componentWillEnter是被触发的方法时，您希望componentWillAppear在挂载时被触发。

Answer 2

CSSTransitionGroup监视写入元素的CSS transition属性的实际用途。我不确定究竟是怎么回事，但听起来Velocity并没有像CSSTransitionGroup那样开展工作。您可能需要手动拨打componentWillEnter和componentWillLeave。在这种情况下，听起来并不难。

编辑：哎呀，我错过了您在组中的子组件上没有key个属性。据我所知，componentWillEnter和componentWillLeave应该被调用，无论其他什么，如果你得到那些孩子的钥匙。

Answer 3

解决方案最终要使用React.addons.TransitionGroup。 CSSTransitionGroup只是一个包含CSS内容的包装器。

另一个问题是，要获得动画回调，孩子们必须有一把钥匙！

ReactTransitionGroup = React.createFactory(React.addons.TransitionGroup)

# {clip}

(ReactTransitionGroup {transitionName: 'fade'},
  (Title {changeTitle:@changeTitle, title:@state.title, key:'title'})
)

用VelocityJS反应动画

3 个答案: