[SOLUCIONADO] animación - quitar, agregar clase

[rkmgralpaz]

Hola !! Tengo un objeto y un boton. Al hacer click al botón, le cambio la clase al objeto, dando por resultado una animacion (la altura pasa de 0 a 100% en 1s ease). Cuando vuelvo a apretar el boton, le saco esa clase, mediante toggleClass. Mi pregunta es, cómo puedo hacer para que al quitarle la clase, haga la animación a la inversa ? es decir, se vuelva a altura 0 en 1s ease? Porque al apretar el boton para quitarla, simplemente desaparece, y yo quiero que desaparezca en forma de animacion. Espero que se entienda mi consulta, muchos saludos !!!

[AngelKrak]

que codigo tiene amigo? y esto no creo que sea CSS, seria Jquery en todo caso jejeje xD

[MMan]

el comando transition lo tienes dentro de la clase que quitas, por eso cuando le agregas la clase (toggleClass ) aparece la animacion, y cuando se la quitas... se mueve al seco


en vez de poner el "transition" dentro de la clase que quitas (toggle),, ponlo en el css del objeto


#myobjeto {
transition: all 1s ease-in;
}

[ZoroRoronoa]

Me imagino que usas Js al dar click al boton y cambiar las clases.
Y para la animacion usas transition de CSS3.

Te dejo el ejemplo:
Saludos.


Ve el ejemplo aqui:
http://codepen.io/kurosaki/pen/dPQJOP

Código HTML:

<div id="midiv" class="normal"></div>
<button>Animar</button>
 

Código CSS:

div {
  background:red;
}
 
.animando {
  width:100px;
  height:100px;
  transition: all 2s ease-in;
}
 
.normal {
  width:0;
  height:0;
  transition: all 2s ease-in;
}
 

Código Javascript:

$(document).ready( function() {
  
  $("button").click( function() {
    var clase = $("#midiv").attr("class");
    if(clase == "animando") {
      //alert("existe clase animando");
      //la quitamos y agregamos NORMAL
      $("#midiv").attr("class","normal");
        $(this).html("Animar");
    } else {
      //alert("CLASE NORMAL");
      //agregamos ANIMACION
      $("#midiv").attr("class","animando");
        $(this).html("Desanimar");
    }
  });
  
});
 

[rkmgralpaz]

Muchas gracias, me ha sido muy útil !! Ahora me funciona muy bien ;)

[rkmgralpaz]

Muchas gracias, lo he puesto en ambas clases como dice ZoroRoronoa y ha funcionado ok