Coffeescript 使用VelocityJS反应动画

我很难让动画在React中工作。也许有些东西我根本就不知道

我是用咖啡脚本写的，希望你不介意

我创建了一个非常简单的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

，但这并没有发生。似乎我应该看到

console.log“willEnter”

，但我没有看到

---

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

transition属性的实际使用情况。我不确定到底是如何做到的，但听起来Velocity并没有像CSSTransitionGroup那样发挥作用。您可能需要手动调用

componentWillEnter

和

componentWillLeave

。在这种情况下，听起来并不难

---

EDIT:oops，我没有注意到您在组中的子组件上没有

key

属性。据我所知，

component将进入

和

component将离开

，如果你得到这些孩子的钥匙，不管其他什么，都应该被调用。

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

第一个是您使用的是

React.addons.cstransitiongroup

，而不是

React.addons.TransitionGroup

---

第二个问题是，您希望

componentWillEnter

在装载时被触发，而实际上

componentwillbeen

是被触发的方法。

解决方案最终是使用

React.addons.TransitionGroup

。

cstransitingroup

只是一个包装器，它可以处理CSS内容

另一个问题是，要获得动画回调，子对象必须有一个关键点

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

# {clip}

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

---

你是这样说的

（Title{changetTitle:@changetTitle，key:'navtitle'，Title:@state.Title}）

？仍然没有收到回拨：/