Как я могу оживить компонент response.js onclick и определить конец анимации

Я хочу, чтобы реагирующий компонент перевернулся, когда пользователь нажимает на элемент DOM. Я вижу некоторую документацию об их анимации mixin, но она выглядит настроенной для событий "enter" и "leave". Каков наилучший способ сделать это в ответ на некоторый ввод пользователя и получить уведомление, когда анимация начнется и завершится? В настоящее время у меня есть элемент списка, и я хочу, чтобы он перевернул шоу несколькими кнопками, такими как удаление, редактирование, сохранение. Возможно, я пропустил что-то в документах.

анимация mixin

http://facebook.github.io/react/docs/animation.html

Ответ 1

После щелчка вы можете обновить состояние, добавить класс и записать событие animationend.

class ClickMe extends React.Component {
  constructor(props) {
    super(props)
    this.state = { fade: false }
  }
  render() {
    const fade = this.state.fade

    return (
      <button
        ref='button'
        onClick={() => this.setState({ fade: true })}
        onAnimationEnd={() => this.setState({ fade: false })}
        className={fade ? 'fade' : ''}>
        Click me!
      </button>
    )
  }
}

См. Plnkr: https://next.plnkr.co/edit/gbt0W4SQhnZILlmQ?open=Hello.js&deferRun=1&preview

Редактировать: Обновлено, чтобы отразить текущий React, который поддерживает анимационные события.

Ответ 2

React использует синтетические события, которые включают анимационные события. Документация находится здесь: https://reactjs.org/docs/events.html#animation-events. Я обновил принятый ответ ниже:

class ClickMe extends React.Component {
  state = {fade: false};

  render () {
    const {fade} = this.state;

    return (
      <button
        onClick={() => this.setState({fade: true})}
        onAnimationEnd={() => this.setState({fade: false})}
        className={fade ? 'fade' : ''}>
          Click me!
      </button>
    )
  }
}

Ответ 3

Я никогда не использовал React, но если он использует CSS3 animations/transitions, вы можете сделать что-то вроде этого:

 element.addEventListener( 'webkitTransitionEnd', function( event ) { 

   console.log( 'Complete');

 }, false );

Ответ 4

Вот ответ с использованием чистых событий Reactjs без каких-либо JQueries, других библиотек, регистраций или смс :)

Ключевым моментом является предоставление имени ключевого кадра анимации в качестве параметра функции

CSS

.Modal {
    position: fixed;
    top: 30%;
    left: 25%;
    transition: all 0.3s ease-out;
}
.ModalOpen {
    animation: openModal 0.4s ease-out forwards;
}
.ModalClosed {
    animation: closeModal 0.4s ease-out forwards;
}

@keyframes openModal {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0);   }
}

@keyframes closeModal {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%);}
}

JS

const modal = ({ 
  isShown, isMounted, 
  initiateUnmountAction, unmountAction
}) => {
  const cssClasses = [
    "Modal",
    props.isShown ? "ModalOpen" : "ModalClosed"
  ];
  return (
    <Fragment>
      {isMounted && <div className={cssClasses.join(' ')}
        onAnimationEnd={event => 
          {event.animationName == "closeModal" && unmountAction}
      }>
        <h1>A Modal</h1>
        <button className="Button" onClick={initiateUnmountAction}>
          Dismiss
      </button>
      </div>}
    </Fragment>

  );
};

Ответ 5

Я успешно использовал этот проект в моей интеграции с интерактивным молотом project есть примеры с молочными событиями и реагировать на анимацию.