0

Se puede añadir transiciones en las funciones javascript como las transitions de CSS?

$("#btn1").click(function() {
 $('body').removeClass();
 $('body').addClass('class1');
});

$("#btn2").click(function() {
 $('body').removeClass();
 $('body').addClass('class2');
});

$("#btn3").click(function() {
 $('body').removeClass();
 $('body').addClass('class3');
});
body {align-items: center;
display: flex;
justify-content: center;
text-align: center;
height: 100%;}

body.class1 {
background-color: red;
}

body.class2 {
background-color: green;
}

body.class3 {
background-color:powderblue;
}

button {padding: 15px 32px;
  margin: 10px;
font-size: 16px;
border-radius: 12px;
border: 2px solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="class1">
<button id="btn1">RED</button>
<button id="btn2">GREEN</button>
<button id="btn3">BLUE</button>
</body>

2
  • 1
    ¿A qué te refieres con añadir transiciones a las funciones de JavaScript? No termina de quedar claro qué es lo que quieres con la pregunta. Te recomiendo que leas Cómo preguntar.
    – Alvaro Montoro
    el 5 nov. 2017 a las 3:18
  • Una vez yo respondí una pregunta similar. Quizás te sirva.
    – user13558
    el 24 dic. 2018 a las 8:47

1 respuesta 1

0

Tengo respuesta, para añadir un fade a un cambio de clases hecho desde un script: 1 - Usar Jquery y jquery-ui 2 - Agregar al cambio de clase la velocidad de animación, easeOutBounce

$("#btn1").click(function() {
 $('body').removeClass();
 $('body').addClass('class1',1000, "easeOutBounce" );
});

$("#btn2").click(function() {
 $('body').removeClass();
 $('body').addClass('class2',1000, "easeOutBounce" );
});

$("#btn3").click(function() {
 $('body').removeClass(); 
 $('body').addClass('class3',1000, "easeOutBounce" );
});
body {align-items: center;
justify-content: center;
text-align: center;
}

body.class1 {
background-color: red;
}

body.class2 {
background-color: green;
}

body.class3 {
background-color:powderblue;
}

button {padding: 15px 32px;
margin: 80px 10px;
font-size: 16px;
border-radius: 12px;
border: 2px solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<body class="class1">
<button id="btn1">RED</button>
<button id="btn2">GREEN</button>
<button id="btn3">BLUE</button>
</body>

No funciona con background-images:

Ejemplo en Codepen

3
  • ¿Esto es una respuesta o una edición a la pregunta? Parece más lo segundo que lo primero. Si estás intentando responder a tu propia pregunta, te recomiendo que traigas las ideas generales de la respuesta en inglés a tu respuesta en español, y que incluyas el código en tu publicación en lugar de en un sitio externo como Codepen. (Lee Cómo responder para más información)
    – Alvaro Montoro
    el 5 nov. 2017 a las 3:17
  • Es respuesta, está en el primer enlace (no el del Codepen)
    – Aspid
    el 5 nov. 2017 a las 9:34
  • OK. Es que tal como está redactada no parece una respuesta y fue marcada como de baja calidad por la comunidad. Para que sea de más ayuda a otros usuarios que puedan tener el mismo problema, sería bueno que la editaras añadiendo las partes claves de los enlaces a tu pregunta. Los enlaces se rompen y entonces tu respuesta dejaría de tener sentido.
    – Alvaro Montoro
    el 5 nov. 2017 a las 14:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.