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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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