HTML / CSS: How to make smooth transition?

Question

I am currently using some Javascript to hide and show a certain div on button click.

I want the transition to be smooth, and not so jumpy. Ideally i would like to add a little bounce effect.

Any ideas on how to achieve this?

var button = document.querySelector(".button1");


button.addEventListener("click", function() {
 var content = document.querySelector(".second");
  content.style.display = (content.style.display === "none") ? "block" : "none";

});

.container {
display: flex; 
align-items: center;
justify-content: space-around;
width: 100%; background: red;

}

.second {
  display: none;
}

<div class="container">
  <div class="first">
    <p> Hello world</p>
  </div>
  <div class="second">
     <p> Goodbye World</p>
  </div>

</div>
<button class="button1" >Apply</button>

Answer 1

One of a million equally beautiful options! )))

var first = document.querySelector(".first");
var second = document.querySelector(".second");
var rectSecond = second.getBoundingClientRect();
first.style.width = `${rectSecond.width}px`;

btn.addEventListener("click", () => {
  first.classList.toggle("animateFirst");
  second.classList.toggle("animateSecond");
});

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .container {
    width: 100%;
    height: 3rem;
    background: red;
    position: relative;
  }
  
  .container div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .first {
    background: red;
    text-align: center;
  }
  
  .animateFirst {
    animation: move1 0.8s ease-out forwards;
  }
  
  @keyframes move1 {
    from {
      left: 50%;
    }
    50% {
      left: 10%;
    }
    75% {
      left: 16%;
    }
    to {
      left: 12%;
    }
  }
  
  .animateSecond {
    animation: move2 0.8s ease-out forwards;
  }
  
  @keyframes move2 {
    from {
      left: 50%;
    }
    50% {
      left: 82%;
    }
    75% {
      left: 76%;
    }
    to {
      left: 80%;
    }
  }
</style>
<div class="container">
  <div class="second">
    <p>Goodbye World</p>
  </div>
  <div class="first">
    <p>Hello world</p>
  </div>
</div>
<button class="button1" id="btn">Apply</button>

Answer 2

You cannot add animation from hidden state.
You need to first add element in layout.

var button = document.querySelector(".button1");
        var content = document.querySelector(".second");

        button.addEventListener("click", function () {

            content.hidden = !content.hidden

        });

.container {
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 100%;
            background: red;


        }

        .second {
            transform-origin: center bottom;
            animation: bounce 1000ms ease-out forwards;
        }

       @keyframes bounce {

            from,
            20%,
            53%,
            to {
                animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                transform: translate3d(0, 0, 0);
            }

            40%,
            43% {
                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                transform: translate3d(0, -30px, 0) scaleY(1.1);
            }

            70% {
                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                transform: translate3d(0, -15px, 0) scaleY(1.05);
            }

            80% {
                transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                transform: translate3d(0, 0, 0) scaleY(0.95);
            }

            90% {
                transform: translate3d(0, -4px, 0) scaleY(1.02);
            }
        }

<div class="container">
        <div class="first">
            <p> Hello world</p>
        </div>
        <div class="second" hidden>
            <p> Goodbye World</p>
        </div>

    </div>
    <button class="button1">Apply</button>

Answer 3

To make CSS transition to make the transition smooth and add a bounce effect. You need to some changes to your code then you can make it very easily. Here you go -

.second {
  display: none;
  transition: all 0.3s ease-in-out;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.second.bouncing {
  animation: bounce 0.5s;
}

Please add a class bouncing to the .second div in your JavaScript code.

var button = document.querySelector(".button1");
button.addEventListener("click", function() {
  var content = document.querySelector(".second");
  content.style.display = (content.style.display === "none") ? "block" : "none";
  content.classList.toggle("bouncing");
});

I hope this will make the transition smooth, and the div will have a bouncing effect when it's displayed. Thank you