Redémarrer la transition css

Question

J'essaye de redémarrer un transition dans Javascript and without librairies or css. Je ne veux pas y parvenir avec un truc comme Settimeout ou clientHeight. Je sais que c'est à cause de la refusion, mais j'essaie de trouver la solution idéale pour cela.

Voici les étapes consistant à:

1) Remove transition -> définir la nouvelle position (without transition)

2) Add transition -> définir la nouvelle position (with animation)

Ici est le Javascript.

let element1 = document.querySelector(".box") 

document.querySelector("button").onclick =() => { 

    element1.style.transition = "none" 
    element1.style.transform = "translateY(50px)" 

    element1.style.transition = "all 0.4s"; 
    element1.style.transform = "translateY(10px)" 

} 

À l'heure actuelle, la transition et le déplacement s'effectuent uniquement de 10px au lieu de définir d'abord la position 50px.

Answer 1

Votre code ne fonctionne pas parce que le navigateur ne recalcule pas les styles entre votre premier lot et le second » "de mises à jour.

Une astuce consiste à forcer le navigateur à les recalculer en appelant l'une des fonctions qui le font. Je vais utiliser getBoundingClientRect, par exemple, car le navigateur doit calculer des styles pour obtenir la taille et la position de l'élément.

Alors:

let element1 = document.querySelector(".box") 
document.querySelector("button").onclick =() => { 
    // Call the first batch of updates 
    element1.style.transition = "none"; 
    element1.style.transform = "translateY(50px)"; 

    // Force the browser recalculate the styles 
    element1.getBoundingClientRect(); 

    // Call the second batch of updates 
    element1.style.transition = "all 0.4s"; 
    element1.style.transform = "translateY(10px)"; 
} 

Answer 2

Vous pouvez le faire sans aucun JS, ayant seulement deux sélecteurs CSS: un qui décrit l'état statique et un autre qui active transition sur l'état cible.

.box { 
 
    background: red; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
.box:hover { 
 
    transform: rotate(180deg); 
 
    transition: transform .3s linear; 
 
}

<div class="box"></div>

En utilisant cette façon vous donnera une seule direction des transitions

Answer 3

Vous pouvez ajouter un EventListener à l'événement transitionEnd puis changer la classe:

let element1 = document.querySelector(".box"); 

element1.addEventlistener("transitionend", loopTransition(),false); 
element1.addEventListener("webkitTransitionEnd", loopTransition, false); 
element1.addEventListener("mozTransitionEnd", loopTransition, false); 
element1.addEventListener("msTransitionEnd", loopTransition, false); 
element1.addEventListener("oTransitionEnd", loopTransition, false); 


function loopTransition(e) { 
    if (e.propertyName == "transform") { 
     if (element1.className == "stateTwo") { 
      element1.className = "stateOne"; 
     } else { 
      element1.className = "stateTwo"; 
    } 
    } 
} 

si vous ne voulez pas utiliser la classe que vous pouvez toujours utiliser cette structure pour changer votre style.

et vous êtes d'abord surclic vous démarrez la transition