web-dev-qa-db-fra.com

Comment puis-je animer un composant react.js en cliquant dessus et détecter le fin de l'animation

Je souhaite qu'un composant de réaction bascule lorsqu'un utilisateur clique sur l'élément DOM. Je vois de la documentation sur leur mix d’animation mais elle semble être configurée pour les événements "entrer" et "quitter". Quelle est la meilleure façon de procéder en réponse à certaines entrées de l'utilisateur et d'être averti du début et de la fin de l'animation? Actuellement, j'ai un élément de la liste et je veux le retourner pour afficher quelques boutons comme supprimer, éditer, enregistrer. J'ai peut-être manqué quelque chose dans la documentation.

mixin d'animation

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

javascriptreactjs
16
Tim

En cas de clic, vous pouvez mettre à jour l'état, ajouter une classe et enregistrer l'événement animationend.

class ClickMe extends React.Component {
  constructor (props) {
    super(props)
    this.state = {}
    this.state.fade = false
    this.fadingDone = this.fadingDone.bind(this)
  }
  componentDidMount () {
    const Elm = this.refs.button
    Elm.addEventListener('animationend', this.fadingDone)
  }
  componentWillUnmount () {
    const Elm = this.refs.button
    Elm.removeEventListener('animationend', this.fadingDone)
  }
  fadingDone () {
    // will re-render component, removing the animation class
    this.setState({fade: false})
  }
  render () {
    const fade = this.state.fade

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

Voir le jsfiddle: https://jsfiddle.net/9eqpfv0k/1/

13
arve0

React utilise des événements synthétiques, qui incluent des événements d'animation. Documention trouvé ici: https://reactjs.org/docs/events.html#animation-events . J'ai mis à jour la réponse acceptée ci-dessous:

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>
    )
  }
}
12
Matt Goo

Je n'ai jamais utilisé React, mais s'il utilise CSS3 animations/transitions, vous pourrez peut-être faire quelque chose comme ceci:

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

   console.log( 'Complete');

 }, false );
1
Foreign Object

Voici la réponse en utilisant des événements purement Reactjs sans JQueries, autres bibliothèques, inscriptions ou sms :)

Le point clé est de fournir le nom de l'image clé d'animation en tant que paramètre de fonction.

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>

  );
};
0
AlexNikonov