How to make smooth transition between display: block and display: none in JS-CodePudding

How can I make a smooth transition here? I've been trying many things but nothing seems to work for me. Can you help me out on this one? I want smooth transition between when the section is visible and when it hides

      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 >
            <button onclick="myFunction()" id="expand">
              <img src="images/down-arrow2.png" id="plus" />
            </button>
          </div>

CodePudding user response：

As already correctly stated by @evolutionbox it will be impossible to do the way you trying to do it. display: none; removes an element from the flow and also in an absolute state. An element can either exist or not exist but not only aprtially exsist.
As such we have to play with the height and remove the visibility of an element by giving it a height: 0. To prevent the visual overflow we combine it with overflow: hidden.
However this would require to know the height. As such we use max-height and set the max-height to an insanely high value that will not be reached.

Last but not least, you should avoid the usage of .style in JS in 2022. Use .classList instead an apply the changes through CSS. classList will add, remove or toggle a class to that elment. Using .toggle('class-name') in this case makes the JS code way shorter as we dont need an if/else statement anymore.

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 >
  <button onclick="myFunction()" id="expand">
    <img src="https://via.placeholder.com/50.jpg/00ff00" id="plus" />
  </button>
</div>

CodePudding user response：

Use opacity for transition smoothly:

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");
  } else {
    x.style.opacity = "1";
    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 >
  <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>

CodePudding user response：

like takoshi i prefer realizing the changes and transitions with CSS whenever possible. To change the background smoothly, I would insert two div-container with the images as background image. Now change / flip the opacity of them both per transition. So you get some more CSS, but this is all really simple stuff. JavaScript is only needed, to toggle the classes. I do it per classList.add and classList.remove, but you can use toggle as well.

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 >
  <button onclick="myFunction()" id="expand" >
    <div ></div>
    <div ></div>

  </button>
</div>