Réagir - Réinitialiser l'animation css en cours

Question

Dans Réagir, si j'ai une animation qui démarre en cliquant sur un bouton, comment puis-je redémarrer cette animation?

jsx

const animationStyle = `countdown ${this.props.duration}s linear infinite forwards`; 


<svg id="svg1"> 
    <circle 
    id="c1" 
    style={{animation: animationStyle }} 
    cx="100" 
    cy="100" 
    r="80" 
    ></circle> 
</svg> 

fichier Css

@keyframes countdown { 
    from { 
    stroke-dashoffset: 0px; 
    } 
    to { 
    stroke-dashoffset: 500px; 
    } 
} 

Si je passe en bas d'une nouvelle durée, il ne sera pas immédiatement commencer la nouvelle animation.

Answer 1

Je crois que vous devez supprimer le cercle svg et l'ajouter à nouveau lorsque vous mettez à jour la durée pour être en mesure de réinitialiser l'animation.

Donc vous réagi pouvez le faire en gardant une variable d'état appelé resetAnimation et avant la mise à jour la durée changer la valeur true cela forcera le composant à rendre ensuite dans la fonction de rappel de setState revenir resetAnimation false à nouveau et mettre à jour la durée.

Code de vérification ci-dessous:

export default class Animation extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     duration:5, 
     restartAnimation : false 
    } 
} 


updateDuration() { 
    //before updating duration set resetAnimation to true to remove the svg from dom, then in the callback function set it to false and update duration 
    this.setState({ 
     restartAnimation: true 
    },() => { 
     requestAnimationFrame(() => { 
      this.setState({ 
       duration: this.state.duration-1, 
       restartAnimation: false 
      }) 
     }) 
    }) 
} 

render() { 
    const animationStyle = `countdown ${this.state.duration}s linear infinite forwards`; 

    //check if resetAnimation is true don't render the svg (now we removed the svg from dom) 
    if(this.state.restartAnimation) 
    { 
     return (<div></div>); 
    } 
    //else if resetAnimation is false render the svg but now the new duration and animation will start from the beginning 
    else 
    { 
     return (
      <svg id={"svg1"}> 
       <circle 
       id="c1" 
       style={{animation: (this.state.restartAnimation ? "" : animationStyle) }} 
       cx="100" 
       cy="100" 
       r="80" 
       > 
       </circle> 
      </svg> 
     ); 
    } 
} 

}