Mi pregunta radica en si es posible darle una transición con css a un elemento html que ejecuta una funcion js mediante el onclick. Actualmente funciona todo, pero no puedo darle una transicion con css a ese elemento.La funcion se ejecuta instantaneamente y queda bastante feo. Adjunto el js que hice, puede que no sea lo mejor pero son mis inicios. Sepan disculpar!.
Lo que quiero hacer es que al hacer click en un span, se ejecute la funcion de js y que lo haga con una transicion de css de unos segundos. Pero la funcion se ejecuta instantaneamente y aunque le de transicion a toda la pagina no funciona.
<div class="mode">
<i id="id-toggle" onclick="cambiarTema()" class="fa-solid fa-toggle-off fa-xl"></i>
</div>
const modoOscuro = () => {
document.querySelector("body").setAttribute("data-bs-theme", "dark");
document.querySelector("#id-icon").setAttribute("class", "icon fa-solid fa-sun fa-lg");
document.querySelector("#id-toggle").setAttribute("class", "fa-solid fa-toggle-on fa-xl");
document.getElementById("text-mode").innerHTML = "Modo Claro"
}
const modoClaro = () => {
document.querySelector("body").setAttribute("data-bs-theme", "light");
document.querySelector("#id-icon").setAttribute("class", "icon fa-solid fa-moon fa-lg");
document.querySelector("#id-toggle").setAttribute("class", "fa-solid fa-toggle-off fa-xl");
document.getElementById("text-mode").innerHTML = "Modo Oscuro"
}
const cambiarTema = () => {
document.querySelector("body").getAttribute("data-bs-theme") === "light" ?
modoOscuro() : modoClaro();
}