React синхронизации анимации

Question

У меня есть следующие компоненты React:

var Hello = React.createClass({ 

    getInitialState: function() { 
     return { 
      visibility: 'visible' 
     }; 
    }, 

    toggleState: function() { 
     if (this.state.visibility === 'visible') { 
      this.setState({visibility: 'hidden'}); 
     } else { 
      this.setState({visibility: 'visible'}); 
     } 
    }, 

    componentDidMount: function() { 
     var self = this; 
     setInterval(function() { 
      self.toggleState(); 
     }, 5000); 
    }, 

    render: function() { 
     return <div className={"animated " + (this.state.visibility === 'visible' ? 'fadeIn' : 'fadeOut')}>{this.state.visibility}</div>; 
    } 

}); 

Смотрите скрипку here.

В основном я контролирую как отображаемую строку, так и видимость компонентов, используя animate.css через state. visibility.

Побочный эффект заключается в том, что когда компонент затухает, он показывает «скрытый», а затем начинает скрываться. Я хотел бы начать анимацию раньше, и только после того, как это будет сделано, измените строку, чтобы «скрытый» никогда не отображался.

Каков наилучший способ для достижения такой синхронизации?

Answer 1

Лучший способ изменить состояние после скрытия завершенной анимации - прослушать событие animationend. Так как вам нужно изменить состояние текста только тогда, когда ваш компонент имеет состояние видимости, вы должны изменить его сразу после полного спряжения анимации и вернуться к visible на анимацию начала.

Продлить state с text:

getInitialState: function() { 
    return { 
    visibility: 'visible', 
    text: 'visible' 
    } 
} 

Таким образом, вы должны добавить слушателя в componentDidMount:

componentDidMount: function() { 
    this.refs.animated.addEventListener('animationend', this.toggleText); // add ref="animated" element 
    // rest code 
} 

Добавить toggleText способ изменить текст состояния на animationend:

toggleText: function() { 
    if (this.state.visibility === 'hidden') { // change only on hidden state 
    this.setState({ 
     text: 'hidden' 
    }); 
    } 

}

И изменение текста visible прямо на старте шоу анимации, так:

toggleState: function() { 
    if (this.state.visibility === 'visible') { 
    this.setState({visibility: 'hidden'}); // text should not be changed immediately 
    } else { 
    this.setState({visibility: 'visible', text: 'visible'}); // change the text on show animation start 
    } 

}

Вот завершено fiddle

Answer 2

Мое решение было использовать ref, чтобы «вручную» синхронизировать текст компонента и видимость с setTimeout:

render: function() { 
    return <div ref="hello">visible</div>; 
} 

componentWillUpdate: function(next_props, next_state) { 
    var self = this; 
    if (next_state.visibility === 'visible') { 
    this.refs.hello.className = 'animated fadeIn'; 
    this.refs.hello.innerHTML = 'visible'; 
    } else { 
    this.refs.hello.className = 'animated fadeOut'; 
    setTimeout(function(){ 
     self.refs.hello.innerHTML = 'hidden'; 
    }, 1000); 
    } 
}, 

скрипку here.