Utilizing exclusively CSS for parent div, achieve dynamic resizing animation

Question

Utilizing exclusively CSS for parent div, achieve dynamic resizing animation

I want to create a transition effect on the parent div when the child div disappears without using display:none

My goal is to have a dynamically centered div that animates using CSS transitions only.

Here is my current approach.

document.querySelector('#one').onclick = function () {
    document.querySelector('#two').classList.add("hidden")
}

#content {
    transition: all 0.5s ease;
}

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

#one, #two {
  width: 300px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

#one {
  background-color: cyan;
}

#two {
  background-color: magenta;
}

.hidden {
  display:none;
}

<div id="content" class="centered">
  <div id="one">PRESS ME</div>
  <div id="two">TO MAKE ME DISAPPEAR</div>
</div>

UPDATE: The solution does not have to use display:none

html css css-transitions

Answer 1

Answer №1

To achieve a transition effect using display:none, you need to try using height instead. The transition should be applied to the element you are hiding, causing the parent div to shrink as the element is no longer visible. Here's an example:

document.querySelector('#one').onclick = function () {
document.querySelector('#two').classList.add("hidden")
}

.centered {
position: fixed;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

#one, #two {
  width: 300px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

#one {
  background-color: cyan;
}

#two {
  background-color: magenta;
  transition: all 0.5s ease;
}

#two.hidden {
  height:0;
  overflow:hidden;
}

<div id="content" class="centered">
  <div id="one">PRESS ME</div>
  <div id="two">TO MAKE ME DISAPPEAR</div>
</div>

If you want the parent div to be animated, adjust the height of the parent to accommodate the hidden element. Set the #content div with a height of 300px and transition it to 150px. Add the hidden class to the #content div and set #two to have a display of none. Here's how you can do it:

document.querySelector('#one').onclick = function () {
document.querySelector('#content').classList.add("hidden")
}

#content {
transition: all 0.5s ease;
  border:5px solid #000;
  height:300px;
}

.centered {
position: fixed;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

#one, #two {
  width: 300px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

#one {
  background-color: cyan;
}

#two {
  background-color: magenta;
}

#content.hidden {
  height:150px;
  overflow:hidden;
}

#content.hidden #two{
  display:none;
}

<div id="content" class="centered">
  <div id="one">PRESS ME</div>
  <div id="two">TO MAKE ME DISAPPEAR</div>
</div>

Answer 2

To achieve a transition effect using display:none, you need to try using height instead. The transition should be applied to the element you are hiding, causing the parent div to shrink as the element is no longer visible. Here's an example:

document.querySelector('#one').onclick = function () {
document.querySelector('#two').classList.add("hidden")
}

.centered {
position: fixed;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

#one, #two {
  width: 300px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

#one {
  background-color: cyan;
}

#two {
  background-color: magenta;
  transition: all 0.5s ease;
}

#two.hidden {
  height:0;
  overflow:hidden;
}

<div id="content" class="centered">
  <div id="one">PRESS ME</div>
  <div id="two">TO MAKE ME DISAPPEAR</div>
</div>

If you want the parent div to be animated, adjust the height of the parent to accommodate the hidden element. Set the #content div with a height of 300px and transition it to 150px. Add the hidden class to the #content div and set #two to have a display of none. Here's how you can do it:

document.querySelector('#one').onclick = function () {
document.querySelector('#content').classList.add("hidden")
}

#content {
transition: all 0.5s ease;
  border:5px solid #000;
  height:300px;
}

.centered {
position: fixed;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

#one, #two {
  width: 300px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

#one {
  background-color: cyan;
}

#two {
  background-color: magenta;
}

#content.hidden {
  height:150px;
  overflow:hidden;
}

#content.hidden #two{
  display:none;
}

<div id="content" class="centered">
  <div id="one">PRESS ME</div>
  <div id="two">TO MAKE ME DISAPPEAR</div>
</div>

Answer 3

Answer №2

Steve's insightful answer led me to discover a solution to the issue at hand. I've slightly modified his solution by setting the transition to height, causing opacity: 0 to take effect instantly.

By doing this, I was able to address the problem effectively. The height transition requires a predefined height (which we already have for the child element) to facilitate the transition animation. Additionally, utilizing opacity: 0 for instant invisibility of the content cleverly centers the parent content automatically.

document.querySelector('#one').onclick = function () {
document.querySelector('#two').classList.add("hidden")
}

.centered {
position: fixed;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

#one, #two {
  width: 300px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

#one {
  background-color: cyan;
}

#two {
  background-color: magenta;
  transition: height 0.5s ease;
}

#two.hidden {
  height:0;
  overflow:hidden;
  opacity: 0;
}

<div id="content" class="centered">
  <div id="one">PRESS ME</div>
  <div id="two">TO MAKE ME DISAPPEAR</div>
</div>

Answer 4

Steve's insightful answer led me to discover a solution to the issue at hand. I've slightly modified his solution by setting the transition to height, causing opacity: 0 to take effect instantly.

By doing this, I was able to address the problem effectively. The height transition requires a predefined height (which we already have for the child element) to facilitate the transition animation. Additionally, utilizing opacity: 0 for instant invisibility of the content cleverly centers the parent content automatically.

document.querySelector('#one').onclick = function () {
document.querySelector('#two').classList.add("hidden")
}

.centered {
position: fixed;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

#one, #two {
  width: 300px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

#one {
  background-color: cyan;
}

#two {
  background-color: magenta;
  transition: height 0.5s ease;
}

#two.hidden {
  height:0;
  overflow:hidden;
  opacity: 0;
}

<div id="content" class="centered">
  <div id="one">PRESS ME</div>
  <div id="two">TO MAKE ME DISAPPEAR</div>
</div>

Utilizing exclusively CSS for parent div, achieve dynamic resizing animation

Answer №1

Answer №2

Similar questions

Transferring data from a form to a function in JavaScript

Convert the MySQL DATE column from numerical month to full month name

The Bootstrap modal stubbornly refuses to close even after resetting the HTML body

Having difficulty decoding audio streams in Flask Socket.IO due to a file received by the Python server

Having trouble getting the header div to span the entire screen

Developing a personalized file upload button in React

What is the best way to crop a background image for optimal lazy loading?

Implementing hover effect triggered by keyboard input

Illustration: Fixing a CSS Issue

How can I design unique navigation menus using HTML, CSS, JavaScript, and jQuery?

Creating a dynamic height sticky sidebar and footer in Bootstrap 5 using CSS/HTML

What could be preventing my HTML replacement assignment from functioning properly?

There seems to be a hitch in the functioning of the JavaScript codes

Ensure that the CSS grid has a minimum span of 3 columns, and if a class object is the only item in a grid row, it

View / Conceal Unordered List depending on link selected

What is the proper way to encode image URLs for use in CSS?

Implement CSS to layer HTML 5 canvases while including a margin

Is there a way to seamlessly integrate a PDF file into a KnockoutJS template without triggering any warnings from PDF plugins?

Tips for sorting through various elements or items

What is the best way to center elements vertically within a table element?