用 VelocityJS 反应动画答案

【问题标题】：React Animations with VelocityJS用 VelocityJS 反应动画
【发布时间】：2015-05-14 02:25:14
【问题描述】：

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

我在 coffeescript 中做这个——希望你不要介意。

我创建了一个非常简单的用户界面。里面有一个带有标题的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" 但我没有。

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

【问题讨论】：

标签： coffeescript reactjs

【解决方案1】：

CSSTransitionGroup 监视写入元素的 CSS transition 属性的实际使用情况。我不确定具体是怎么做的，但听起来 Velocity 并没有以 CSSTransitionGroup 所采用的方式进行工作。您可能需要手动致电componentWillEnter 和componentWillLeave。在这种情况下，听起来并不难。

编辑： 哎呀，我错过了您在组中的子组件上没有 key 属性。据我所知，componentWillEnter 和 componentWillLeave 应该被调用，不管其他任何事情，如果你拿到那些孩子的钥匙。

【讨论】：

你是说这样(Title {changeTitle:@changeTitle, key: 'navtitle', title:@state.title})？仍然没有得到回调：/

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

解决方案最终是使用React.addons.TransitionGroup。 CSSTransitionGroup 只是一个封装 CSS 的东西。

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

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

# {clip}

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

【讨论】：