¿Cómo puedo hacer una transición suave aquí? He estado probando muchas cosas pero nada parece funcionar para mí. ¿Puedes ayudarme con esto? Quiero una transición suave entre el momento en que la sección está visible y el momento en que se oculta.
function myFunction() { var x = document.getElementById("myDIV"); var y = document.getElementById("plus"); if (x.style.display === "block") { x.style.display = "none"; y.setAttribute("src", "images/down-arrow2.png"); } else { x.style.display = "block"; y.setAttribute("src", "images/up-arrow2.png"); } } <div id="myDIV"> <section> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </section> </div> <div class="ex"> <button onclick="myFunction()" id="expand"> <img src="images/down-arrow2.png" id="plus" /> </button> </div>Como ya lo indicó correctamente @evolutionbox, será imposible hacerlo de la manera en que intenta hacerlo. display: none; elimina un elemento del flujo y también en un estado absoluto. Un elemento puede existir o no existir, pero no solo existir parcialmente.
Como tal, tenemos que jugar con la altura y eliminar la visibilidad de un elemento dándole una height: 0 . Para evitar el desbordamiento visual lo combinamos con overflow: hidden .
Sin embargo, esto requeriría saber la altura. Como tal, usamos max-height y establecemos max-height en un valor increíblemente alto que no se alcanzará.
Por último, pero no menos importante, debe evitar el uso de .style en JS en 2022. Use .classList en su lugar y aplique los cambios a través de CSS. classList agregará, eliminará o cambiará una clase a ese elemento. El uso .toggle('class-name') en este caso hace que el código JS sea mucho más corto, ya que ya no necesitamos una instrucción if/else.
function myFunction() { var x = document.getElementById('myDIV'); var y = document.getElementById("plus"); x.classList.toggle('visible'); if (x.classList.contains('visible') === true) { y.setAttribute("src", "https://via.placeholder.com/50.jpg/ff0000"); } else { y.setAttribute("src", "https://via.placeholder.com/50.jpg/00ff00"); } } #myDIV { max-height: 0; /* makes the element invisible due to no height */ overflow: hidden; /* hides the visual overflow when the elements height is smaller then the contents height */ transition: max-height 0.75s ease-out; /* smooth-transition between both "states" */ } #myDIV.visible { max-height: 1000vh; /* insanely high value */ transition: max-height 0.75s ease-in; /* smooth-transition between both "states" */ } <div id="myDIV"> <section> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </section> </div> <div class="ex"> <button onclick="myFunction()" id="expand"> <img src="https://via.placeholder.com/50.jpg/00ff00" id="plus" /> </button> </div>como takoshi, prefiero realizar los cambios y transiciones con CSS siempre que sea posible. Para cambiar el fondo sin problemas, insertaría dos div-container con las imágenes como imagen de fondo. Ahora cambia / voltea la opacidad de ambos por transición. Entonces obtienes un poco más de CSS, pero todo esto es realmente simple. Solo se necesita JavaScript para alternar las clases. Lo hago por classList.add y classList.remove, pero también puedes usar alternar.
function myFunction() { let myDiv = document.getElementById("myDIV"); if (myDiv.classList.contains('hidden')) { myDiv.classList.remove('hidden') ; document.getElementById("expand").classList.add('hide'); } else { document.getElementById("expand").classList.remove('hide'); myDiv.classList.add('hidden' ); } } #myDIV{ opacity: 1.0 ; transition: all 0.3s ease-in-out ; } #myDIV.hidden{ opacity: 0.0 ; transition: all 0.5s ease-in-out ; } #expand{ position: relative ; height: 50px ; width: 50px ; transition: all 0.5s ease-in-out ; } #expand .button_inner{ position: absolute ; top: 0px ; left: 0px ; width: 50px ; height: 50px ; } #expand .show{ opacity: 1.0 ; transition: all 0.8s ease-in-out ; background: url('https://via.placeholder.com/50.jpg/00ff00') ; } #expand .hide{ opacity: 0.0 ; transition: all 0.8s ease-in-out ; background: url('https://via.placeholder.com/50.jpg/ff0000') ; } #expand.hide .show{ opacity: 0.0 ; transition: all 0.8s ease-in-out ; } #expand.hide .hide{ opacity: 1.0 ; transition: all 0.8s ease-in-out ; } <div id="myDIV"> <section> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </section> </div> <div class="ex"> <button onclick="myFunction()" id="expand" class="hide"> <div class="button_inner show"></div> <div class="button_inner hide"></div> </button> </div>Use la opacity para una transición suave:
var x = document.getElementById("myDIV"); var y = document.getElementById("plus"); x.style.opacity = "1"; function myFunction() { if (x.style.opacity === "1") { x.style.opacity = "0"; x.style.transition = "1s opacity"; y.setAttribute("src", "https://s6.uupload.ir/files/on-off-switch-sign-vector-8935407_ldx0.jpg"); setTimeout(function(){x.style.display = "none"}, 1000); } else { x.style.display = "block"; x.style.opacity = "0"; setTimeout(function(){x.style.opacity = "1";}, 1000); y.setAttribute("src", "https://s6.uupload.ir/files/on-off-switch-web-icon-vector-8987917_2es3.jpg"); } } button { width: 50px; height: 50px; } img { width: 100%; height: 100%; } <div id="myDIV"> <section> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </section> </div> <div class="ex"> <button onclick="myFunction()" id="expand"> <img src="https://s6.uupload.ir/files/on-off-switch-web-icon-vector-8987917_2es3.jpg" id="plus" /> </button> </div>