Foros del Web » Creando para Internet » CSS »

Revertir una animacion CSS al hacer click

Estas en el tema de Revertir una animacion CSS al hacer click en el foro de CSS en Foros del Web. Buenos dias! Tengo una duda que me gustaría saciar, ya que mi imaginación ahora mismo sobrepasa mis conocimientos (aclaro, estoy empezando, no me deis muy ...
  #1 (permalink)  
Antiguo 07/07/2016, 02:47
 
Fecha de Ingreso: febrero-2016
Ubicación: Tenerife
Mensajes: 6
Antigüedad: 6 años, 5 meses
Puntos: 0
Revertir una animacion CSS al hacer click

Buenos dias!
Tengo una duda que me gustaría saciar, ya que mi imaginación ahora mismo sobrepasa mis conocimientos (aclaro, estoy empezando, no me deis muy duro, pero dadme caña :)).
Resulta que estoy realizando una serie de cambios en www.jardineriatudor.es/2.0 y, empezando por los cambios visuales, he realizado al menu principal una animación fadeInDown bastante chula, el código que he utilizado viene del famoso animate.css y en el index quedó asi:

Código HTML:
<nav id="menu" class="animated fadeInLeft delay-01">
        <a href="#" class="nav-mobile" id="nav-mobile"></a>
    <ul>
      <li class="current hvr-float-shadow click"> <a class="animated fadeInDown delay-02s" href="index.html">Inicio</a> </li> 
      <li class="hvr-float-shadow transform"> <a class="animated fadeInDown delay-04s" href="quienes.html">Quienes Somos</a> </li>
      <li class="hvr-float-shadow"> <a class="animated fadeInDown delay-06s" href="servicios.html">Servicios</a> </li> 
      <li class="hvr-float-shadow"> <a class="animated fadeInDown delay-08s" href="trabajos.html">Trabajos Realizados</a> </li> 
      <li class="hvr-float-shadow"> <a class="animated fadeInDown delay-1s" href="contact.html">Contáctanos</a> </li> 
    </ul>
        </nav> 
La animación queda chulísima, pero se me metió en la cabeza que me gustaría que, al hacer click en cualquiera de los href, la animación fuera en sentido contrario (desaparecieran los iconos "rebobinando" la animación) y luego cargara el link.
Lo único que he conseguido es hacer que la web espere antes de cargar la página con un pequeño timer en JS:
Código HTML:
<script>
$('#timerLinkIndex').click (function (e) {
   e.preventDefault(); 
   setTimeout(function () {
       window.location.href = "http://www.mobitex.es";
    }, 1000); //will call the function after 2 secs.
});
</script> 
obviamente esto ni revierte ni nada, espera el tiempo en ms que le pongas y listo. Así que lanzo de nuevo mi pregunta:

Mientras el server espera este tiempo para cargar el href ¿Es posible crear un evento onClick en CSS (Quizá con target) para revertir la animacion y hacer que "desaparezcan los iconos" para que luego "reaparezcan" con la animación de nuevo en la pagina destino?

Mil gracias por vuestra ayuda!
  #2 (permalink)  
Antiguo 07/07/2016, 09:53
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 19 años, 5 meses
Puntos: 1826
Respuesta: Revertir una animacion CSS al hacer click

La realidad es que una animación cuando se recarga la página no se me hace buena idea.

Si la animación está en la misma página, como on One Page Design, puede que esté bien. También puede funcionar si tu contenido se carga con Ajax.

La cosa es que se uses el mismo JavaScript que tú recomendaste: http://jsfiddle.net/jlratwil/w83BW/

pero cambia el evento onMouseOver por OnMouseClick.

Los eventos CSS están limitados a :hover y :checked, para esto se necesita el JavaScript para añadir otro estado.

Tal ves puedas tratar con :visited.

Con target no estoy seguro, ya que el target de un link es apuntar a otro objeto. http://tympanus.net/codrops/2012/12/...-click-events/

Última edición por Rafael; 07/07/2016 a las 10:34
  #3 (permalink)  
Antiguo 07/07/2016, 11:20
 
Fecha de Ingreso: febrero-2016
Ubicación: Tenerife
Mensajes: 6
Antigüedad: 6 años, 5 meses
Puntos: 0
Respuesta: Revertir una animacion CSS al hacer click

Hombre, la cosa es que no quiero que haga un efecto en hover, ya los botones tienen su propio efecto al pasar el ratón.
Pero si que podré aprovechar el segundo ejemplo que me has pasado, voy a intentarlo y te comento.
Un millon de gracias! :D
  #4 (permalink)  
Antiguo 07/07/2016, 17:35
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 19 años, 5 meses
Puntos: 1826
Respuesta: Revertir una animacion CSS al hacer click

No al hover. Sino que adaptes el script para el evento onClick.

Acá está la busqueda de Google que yo usaría: https://www.google.com.mx/search?q=addClass+onClick

Es muy específico onCLick addClass Con Jquery es muy fácul de implementar.

Etiquetas: animacion, html, revertir
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:08.