Animación CSS, alternar rotar al hacer clic

3 minutos de lectura

Intento que el símbolo de intercalación a continuación gire 180 grados al hacer clic en mi menú desplegable. En la solución que estoy tratando de implementar, cambia la clase del signo de intercalación para alternar hacia arriba o hacia abajo al hacer clic. La primera vez que hago clic gira hacia arriba, la segunda vez vuelve inmediatamente a su posición inicial y luego vuelve a girar hacia arriba. Huelo código sucio, ¿cuál es la forma más fácil de agregar esta animación de alternar rotación? Gracias de antemano por cualquier ayuda.
Aquí está mi css actual:

.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);
  }
}

ingrese la descripción de la imagen aquí

  • ¿Quiere decir que el estado después de su primera rotación hacia arriba no se conserva y cuando vuelve a hacer clic en él, vuelve a realizar la rotación hacia arriba? En caso afirmativo, creo que debería usar javascript para preservar el estado de la última animación.

    – Megha

    29 de junio de 2015 a las 6:15


Realmente no necesitas una animación de fotogramas clave para algo tan simple. Si solo agrega una clase a su ícono al hacer clic y luego eliminarlo, esto aplicará su rotación. Aquí hay un plunkr que funciona usando una fuente impresionante y una rotación simple. Este es solo un ejemplo simple, querrá utilizar prefijos de proveedores y tenga en cuenta que las transiciones css no funcionan en navegadores más antiguos.

<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);

avatar de usuario de arm.localhost
brazo.localhost

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

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

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

Debe tener un estado inicial para completar su animación.

Aquí está el ejemplo: códec

ACTUALIZAR

Aquí está la versión sin usar javascript: códec

<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);
}

La idea general es cambiar la clase de bloque usando Selectores de hermanos adyacentes y la casilla comprobado Expresar.

  • Ya veo, gracias, estaba tratando de descubrir cómo usar la transición en su lugar. ¿Cuál es el propósito del operador tilda en la declaración javascript if en su codepen?

    –Daniel Kobe

    29 de junio de 2015 a las 6:21

  • Oh, lo siento. Estoy tratando de escribir esto sin usar JS. Es el borrador. Lo traeré al estado inicial.

    – arm.localhost

    29 de junio de 2015 a las 6:23

¿Ha sido útil esta solución?