// A function that hides or shows a selected element function hideOrShow1() { // Select the element with id "theDIV" var x = document.getElementById("popup_roadmap_info_picture_1"); // If selected element is hidden if (x.style.display === "block") { // Show the hidden element x.style.display = "none"; // Else if the selected element is shown } else { // Hide the element x.style.display = "block"; x.style.transition = "3s"; } }Quiero que el elemento que se mostrará tenga una transición. ¿Es posible con js. NOTA: x.style.transition no funciona.
No puede realizar transiciones si el elemento se alterna para display: none . Puede usar la propiedad de opacity o las propiedades de height and width
¿Qué propiedad está tratando de hacer la transición? No puede cambiar los estados de visualización de none a block , por lo que podría parecer que style.transition no funciona.
Puede cambiar la opacidad, transformar la escala, el ancho o la altura para obtener un efecto de aparición/desaparición.
display: none para display:block no tiene pasos intermedios, es como un interruptor de luz que se enciende o apaga. Deberá usar una propiedad que tenga un valor numérico como opacity . Cuando usa el atributo .style , está sobrescribiendo todo lo que contiene. Así que si haces esto:
// 👎 x.style.opacity = "1"; x.style.transition = "3s";Si miras en devtools y miras el diseño HTML, deberías ver:
<div class='popup' style='opacity:1'></div> <!--👎-->Luego esto:
<div class='popup' style='transition:3s'></div> <!--👎-->Necesitas esto:
<div class='popup' style='transition:3s;opacity:1'></div> <!--👍--> Para hacer todas las reglas con todas las propiedades y valores a la vez, usa la propiedad .cssText de esta manera:
x.style.cssText = "transition: 3s; opacity:1;"; // 👍 function popup() { let x = document.querySelector(".popup"); if (x.style.opacity === "0") { x.style.cssText = "transition: all 3s; font-size: 100px; opacity: 1;"; } else { x.style.cssText = "transition: all 3s; font-size: 0; opacity: 0;"; } } document.querySelector('button').onclick = popup; <button>BOO</button> <div class='popup' style='opacity: 0; font-size:0;'>👻</div>