tweenMax.to 在反应 componentDidMount 中不起作用答案

【问题标题】：tweenMax.to not working in react componentDidMounttweenMax.to 在反应 componentDidMount 中不起作用
【发布时间】：2015-12-14 22:49:47
【问题描述】：

我正在尝试在 react 的 componentDidMount 方法中使用 GreenStock TweenMax，但我看到动画没有触发（但 onComplete 和 'onStart 方法可以正常触发）。我根据预感尝试了一些事情，发现当我添加 setTimeout 100 毫秒时，动画会播放。预感是在调用 GreenStock 时元素还没有真正准备好。

我的印象是componentDidMount类似于jquery的$(document).ready()

这是我的简单代码（没有用咖啡脚本编写的 settimeout：

componentDidMount: ->
  commentList = React.findDOMNode(@refs.commentList)
  console.log commentList
  TweenMax.to commentList, 1,{opacity: 0,onComplete :-> console.log 'TL called'}

元素commentList被正确返回，但动画没有播放（但动画的回调是）

这段代码有问题吗，或者有人知道 react 和 greenstock 的 tweenmax 之间的问题吗？

【问题讨论】：

您在 componentDidMount 中的权利应该在此时返回一个有效元素。如果你要做一个setTimeout(fn,0)，那也行吗？
您可以尝试使用 this.forceUpdate(); 在调用 TweenMax.to() 之前在 componentDidMount 方法中重新渲染组件。虽然不推荐，但可以证明这里有用，而不是 setTimeout。
@mattclemens 使用 setTimeout(fn,0) 不起作用。有效的时间是setTimeout(fn,1000)，这让我觉得应用程序中存在某种滞后，因为componentDidMount 应该（逻辑上）只在该组件的所有内容都在 DOM 上时才被调用
@TahirAhmed this.forceUpdate( [function/callback] ) 不起作用，this.setState() 也不起作用。就像调用 componentDidMount 时元素不在 DOM 上一样。我发誓 React 最近一直在尝试我的耐心
@zero：这很奇怪。你能整理一个简单的 jsFiddle 来描述这个问题吗？

标签： javascript reactjs gsap

【解决方案1】：

所以我在动画的 DOM 元素上有一个唯一键 require 'uuid' <div key={uuid()}></div>（最初我使用原始 js 和 css3 执行此操作，需要重新渲染元素）所以删除它可以工作

【讨论】：