web-dev-qa-db-fra.com

Animation CSS, basculer la rotation au clic

J'essaie de faire pivoter le curseur de 180 degrés sur le clic pour mon menu déroulant. Dans la solution que j'essaye d'implémenter, cela change la classe du curseur pour basculer vers le haut ou vers le bas au clic. La première fois que je clique dessus, il tourne vers le haut, la deuxième fois, il revient immédiatement à sa position de départ, puis tourne vers le haut. Je sens du code sale, quel est le moyen le plus simple d'ajouter cette animation de rotation à bascule. Merci d'avance pour votre aide.
Voici mon css actuel:

.toggle-up {
  animation-name: toggle-up;
  animation-delay: 0.25s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}
.toggle-down {
  animation-name: toggle-down;
  animation-delay: 0.25s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}

/*animations*/
@keyframes toggle-up {
  100% {
    transform: rotate(180deg);
  }
}
@keyframes toggle-down {
  100% {
    transform: rotate(180deg);
  }
}

enter image description here

javascripthtmlcsscss-animations
10
Daniel Kobe

Vous n'avez pas vraiment besoin d'une animation d'images clés pour quelque chose d'aussi simple. Si vous ajoutez simplement une classe à votre icône en cliquant dessus puis la supprimez, cela appliquera votre rotation. Voici un plunkr fonctionnel utilisant une police géniale et une rotation simple . Ceci est juste un exemple simple, vous voudrez utiliser des préfixes de fournisseurs et être conscient que les transitions CSS ne fonctionnent pas dans les anciens navigateurs.

<div id="container">
    <i id="icon" class="fa fa-arrow-down"></i>
</div>

.fa-arrow-down{
  transform: rotate(0deg);
  transition: transform 1s linear;
}

.fa-arrow-down.open{
  transform: rotate(180deg);
  transition: transform 1s linear;
}

(function(document){
  var div = document.getElementById('container');
  var icon = document.getElementById('icon');
  var open = false;

  div.addEventListener('click', function(){
    if(open){
      icon.className = 'fa fa-arrow-down';  
    } else{
      icon.className = 'fa fa-arrow-down open';
    }

    open = !open;
  });
})(document);
19
Kevin F
.square {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transition: all 0.75s 0.25s;
}

.toggle-up {
  transform: rotate(180deg);
}

.toggle-down {
  transform: rotate(0);
}

Vous devez avoir un état initial afin de terminer votre animation.

Voici l'exemple: codepen

[~ # ~] mise à jour [~ # ~]

Voici la version sans utiliser javascript: codepen

<label for="checkbox">
  <input type="checkbox" id="checkbox">
  <div class="square toggle-down"></div>
</label>


#checkbox {
  display: none;
}

.square {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transition: all 0.75s 0.25s;
  transform: rotate(0);
}

#checkbox:checked + .square {
  transform: rotate(180deg);
}

L'idée générale est de changer la classe de bloc à l'aide de l'état Sélecteurs frères adjacents et la case à cocher cochée .

9
arm.localhost