Displaying div in a smooth manner

Question

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>sample</title>
  </head>
  <style >
    body{
      background: black;
    }
    div{
      background : red;
      height: 200px;
      margin : 20px 100px;
      width : auto;
      display: none;
    }
    button{
      color: red;
      font-weight:bold;
      background : grey;
      padding : 5px 20px;
      font-size : 1rem;
    }
  </style>
  <body>
    <div id="myDIV">
    </div>
    <button type="button" onclick=myFunction() name="button">CLICK ME</button>
  </body>
  <script>
    function myFunction(){
      document.getElementById("myDIV").style.display = "block";
    }
  </script>
</html>

QUESTION
As you can see, when i click the button, the div appear. But this i want the dev to appear in a smooth manner.
I tried this solution but it did'nt work for me.

rafalou38 · Answer 1 · 2021-03-12T18:06:10.267

You can use CSS transition to make it smooth.

If you want transitions you can't use display: none; to hide it because with display it is completely hidden or completely visible,
instead, you can use height or opacity.

To toggle its visibility, I also recommend toggling a class with the styles for the shown state instead of settings them directly in the script,
it makes it easier to maintain and to add more visual effects

function myFunction() {
  document.getElementById("myDIV").classList.toggle("shown")
}

body {
  background: black;
}

.shown {
  height: 200px;
  opacity: 1;
}

div {
  background: red;
  height: 0px;
  opacity: 0;
  margin: 20px 100px;
  width: auto;
  transition: all 1s;
}

button {
  color: red;
  font-weight: bold;
  background: grey;
  padding: 5px 20px;
  font-size: 1rem;
}

<div id="myDIV">
</div>
<button type="button" onclick=myFunction() name="button">CLICK ME</button>

Thanks for the help. This worked perfectly fine. – jeno Mar 13 '21 at 06:17 — jeno, Mar 13 '21 at 06:17

score 0 · Answer 2 · answered Mar 12 '21 at 17:56

Here is a solution using opacity. It seems like a good use case because it also eliminates content shifting in this example (the button changing position).

function myFunction(){
      document.getElementById("myDIV").classList.add('div-show');
    }

body{
      background: black;
    }
    div{
      background : red;
      height: 200px;
      margin : 20px 100px;
      width : auto;
      //display: none;
      opacity:0;
      transition:opacity.3s;
    }
    .div-show{
      opacity:1;
    }
    button{
      color: red;
      font-weight:bold;
      background : grey;
      padding : 5px 20px;
      font-size : 1rem;
    }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>sample</title>
  </head>
  <body>
    <div id="myDIV">
    </div>
    <button type="button" onclick=myFunction() name="button">CLICK ME</button>
  </body>
</html>

Thanks for trying. But if we add the opacity. It only be invisible and still occupy space on the web page. I wanted a div to be created in a smooth manner when a button is clicked — jeno, Mar 13 '21 at 06:21

score 0 · Answer 3 · answered Mar 12 '21 at 17:57

0

Do you want it to fade in slowly? If so instead of using display use opacity and make it slowly increase with a css animation. Tutorial here https://www.w3schools.com/css/css3_animations.asp

answered Mar 12 '21 at 17:57

GtiClicker

78
8

Oybek Toshmatov · Answer 4 · 2021-03-12T18:04:52.917

You can add css animation and keyframes. add the following inside your div in styles

animation-name: example; animation-duration: 2s;

and add the following inside style tag:

 @keyframes example {0%   {opacity: 0; } 100% {opacity: 1;}}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>sample</title>
  </head>
  <style >
    body{
      background: black;
    }
    div{
      background : red;
      height: 200px;
      margin : 20px 100px;
      width : auto;
      display: none;
      animation-name: example;
  animation-duration: 2s;
    }

@keyframes example {
  0%   {opacity: 0; }
  100% {opacity: 1;}
}
    button{
      color: red;
      font-weight:bold;
      background : grey;
      padding : 5px 20px;
      font-size : 1rem;
    }
  </style>
  <body>
    <div id="myDIV">
    </div>
    <button type="button" onclick=myFunction() name="button">CLICK ME</button>
  </body>
  <script>
    function myFunction(){
      document.getElementById("myDIV").style.display = "block";
    }
  </script>
</html>

This surely looks like it work. But the div suddenly appears our of no where. — jeno, Mar 13 '21 at 06:19

Aakash · Answer 5 · 2021-03-12T18:28:05.007

In the code you've pasted; the <style> tag is misplaced. For the <style> tag to work; you need to place it inside the <head> or <body> tag.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8" />
  <title>sample</title>
  <style>
    body {
      background: black;
    }
    
    div#myDIV {
      background: red !important;
      font-szie: 50px;
      background: red;
      height: 200px;
      margin: 20px 100px;
      width: auto;
      opacity: 0;
      transition: 1s opacity;
    }
    
    div.animate__fadeIn {
      opacity: 1 !important;
      transition: 1s opacity;
    }
    
    button {
      color: red;
      font-weight: bold;
      background: grey;
      padding: 5px 20px;
      font-size: 1rem;
    }
  </style>
</head>

<body>
  
  <button type="button" onclick="myFunction()" name="button">CLICK ME</button>
  <div id="myDIV">Hello World</div>
  <script>
    function myFunction() {
      document.getElementById("myDIV").classList.toggle("animate__fadeIn");
    }
  </script>
</body>

</html>

This div already occupied a space in the page. Thanks for trying. I got the solution. — jeno, Mar 13 '21 at 06:23

Displaying div in a smooth manner

5 Answers5

Linked