tweenMax.to не работает в реагирующем компонентеDidMount

Я пытаюсь использовать GreenStock TweenMax внутри метода реакции componentDidMount, но вижу, что анимация не запускается (но методы onComplete и 'onStart работают нормально). Я попробовал несколько вещей, основанных на догадке, и обнаружил, что когда я добавляю setTimeout на 100 мс, анимация воспроизводится. подозрение в том, что элемент еще не готов к моменту вызова GreenStock.

У меня сложилось впечатление, что componentDidMount похоже на $(document).ready() jquery.

вот мой простой код (без settimeout, написанного в кофейном скрипте:

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

элемент commentList возвращается правильно, но анимация не воспроизводится (но обратные вызовы на анимации есть)

что-то не так с этим кодом, или кто-то знает о проблемах между реакцией и tweenmax от greenstock?


reactjs javascript gsap
person zero    schedule 14.12.2015    source источник
comment
ваше право в том, что componentDidMount должно вернуть действительный элемент в этот момент. Если бы вы сделали setTimeout(fn,0), это тоже сработало бы?   -  person enjoylife    schedule 15.12.2015
comment
вы можете попробовать использовать this.forceUpdate(); для повторной визуализации компонента внутри метода componentDidMount перед вызовом TweenMax.to(). хотя это и не рекомендуется, но здесь может оказаться полезным вместо setTimeout.   -  person Tahir Ahmed    schedule 15.12.2015
comment
@mattclemens с использованием setTimeout(fn,0) не работает. время, которое работает, - это setTimeout(fn,1000), что заставляет меня думать, что в приложении есть какая-то задержка, потому что componentDidMount следует (логически) вызывать только тогда, когда все из этого компонента находится в DOM.   -  person zero    schedule 15.12.2015
comment
@TahirAhmed this.forceUpdate( [function/callback] ) не работает и this.setState() с обратным вызовом. это похоже на то, что элемент не находится в DOM, когда вызывается componentDidMount. Клянусь, реакция в последнее время испытывает мое терпение   -  person zero    schedule 15.12.2015
comment
@zero: это странно. Можете ли вы собрать простой jsFiddle, изображающий эту проблему?   -  person Tahir Ahmed    schedule 16.12.2015

Ответы (1)


arrow_upward
0
arrow_downward

поэтому у меня был уникальный ключ в элементе DOM, который я анимировал require 'uuid' <div key={uuid()}></div> (первоначально я делал это с необработанными js и css3, которые требовали повторного рендеринга элемента), поэтому удаление его работало

person zero    schedule 16.12.2015