1

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();
}

4
  • 2
    En programación todo es posible, siempre cuando hagas una pregunta debes agregar lo que ha intentado para solucionar el problema vi que pusiste etiquetas de js, html y css entonces agrega eso a la pregunta a partir de ahí te podrán ayudar.
    – JoseMgz_Ux
    Commented el 8 feb. 2023 a las 20:53
  • Buen día, podrías adjuntarnos también tu HTML? Commented el 8 feb. 2023 a las 21:11
  • Ahí pude adjuntar todo! Commented el 8 feb. 2023 a las 21:19
  • Buenas!. Hice el cambio que me sugeriste pero aun asi, no ejecuta la transicion. Commented el 9 feb. 2023 a las 0:53

2 respuestas 2

1

Puedes agregar una transición a todas las propiedades, de un elemento y sus hijos de esta manera:

.transicion, .transicion *{
  transition: all 1.4s;
}

El problema es que dejamos las transiciones seteadas de esa manera para siempre, lo cual puede entorpecer otros efectos de transición que aplica tu theme.

Entonces hay que colocar la clase y luego quitarla, para esto vamos a usar setTimeout con un tiempo ligeramente mayor al asignado en la transición. De esta manera no pisamos la transiciones de los elementos como por ejemplo el hover

DEMO:

Nota: El único cambio en el JS son 2 instrucción en la función cambiarTema

const cambiarTema = function (theme) {
   const body= document.querySelector("body");
   
   //agregamos la clase
   body.classList.add("transicion");
   
   //quitamos la clase
   setTimeout(() => body.classList.remove("transicion"),1500);
   
   
   body.getAttribute("data-bs-theme") === "light" ?
        modoOscuro() : modoClaro();
  }
  
  
  
  //acá comenté coódigo tuyo, solo porque en esta demo no están los elementos a que se hacen mención
  
  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"
}
.transicion, .transicion *{
  transition: all 1.4s;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<body data-bs-theme="light">
<div class="p-3 text-body bg-body">

<button class="btn btn-primary" onclick="cambiarTema()">cambiar tema</button>


  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Color modes</a></li>
      <li class="breadcrumb-item active" aria-current="page">Dark</li>
    </ol>
  </nav>
<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

  <p>This should be shown in a <strong>dark</strong> theme at all times.</p>

  <div class="progress mb-4">
    <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

  <div class="dropdown mb-4">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark2" data-bs-toggle="dropdown" aria-expanded="false">
      Dark dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item active" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
  </div>

</body>

1
  • Muchísimas gracias por tu ayuda y experiencia, pude hacer que funcione pero me quedo un elemento que hace la transición mas lento. Pero eso ya lo veré!. Saludos!!!. Commented el 9 feb. 2023 a las 4:39
0

Prueba agregando una nueva clase al #id-toggle, en tu función modoOscuro():

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 activar");
  document.getElementById("text-mode").innerHTML = "Modo Claro"
}

Y en CSS, le darías la propiedad de transición a esa clase:

#id-toggle .activar {
  transition: transform 2s ease-in-out;
}
2
  • Si mal no estoy, está usando bootstrap, entonces sería mejor darle otro nombre a la clase por si acaso ya esté en uso.
    – javdromero
    Commented el 8 feb. 2023 a las 21:52
  • @javdromero Listo, gracias por la observación. Commented el 8 feb. 2023 a las 21:53

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.