Smoothly animate the height change of dynamically inserted content within a DIV using CSS transitions

Question

Smoothly animate the height change of dynamically inserted content within a DIV using CSS transitions

Here is the template I am currently working with:

<div class='content'>
    {{content}}
</div>

Along with the following style:

.content {
  margin-top: 30px;
  background-color: skyblue;
  width: 300px;
  transition: all linear 0.5s;
}

I am facing an issue where the {{content}} dynamically grows or shrinks, but the CSS transition does not work properly when new content is injected into the element. How can I ensure that the transition works correctly even when more content is added?

You can view the code on this Plunker link.

Thank you,

Amit.

html css angularjs css-transitions

Answer 1

Answer №1

It is important to note that transitions in CSS only apply to changes made directly to the CSS properties, not for changes calculated by the browser.

A technique you can use is to nest a div, apply overflow: hidden to the outer div, then set the computed height of the inner div as the height of the outer one to achieve a smooth transition effect.

CSS:

#outer {
    margin-top: 30px;
    background-color: skyblue;
    width: 300px;
    transition: all linear 0.5s;
    overflow: hidden;
}

HTML:

<button id="more" onclick="increase();">More</button>
<button id="more" onclick="decrease();">Less</button>
<div id="outer">
    <div id="inner">
        lorem ipsum
    </div>
</div>

JS:

function increase()
{
    var o = document.getElementById('inner');
    var t = o.innerHTML;
    for (var i=0 ; i<20;i++)
        t += " lorem ipsum";
    o.innerHTML = t;
    adjustHeight();
}

function decrease()
{
    var o = document.getElementById('inner');
    o.innerHTML = "lorem ipsum";
    adjustHeight();
}

function adjustHeight()
{
    var i = document.getElementById('inner');
    var o = document.getElementById('outer');

    o.style.height = window.getComputedStyle(i).height;
}

Check out the working fiddle: http://jsfiddle.net/Lnts7w1f/

Answer 2

It is important to note that transitions in CSS only apply to changes made directly to the CSS properties, not for changes calculated by the browser.

A technique you can use is to nest a div, apply overflow: hidden to the outer div, then set the computed height of the inner div as the height of the outer one to achieve a smooth transition effect.

CSS:

#outer {
    margin-top: 30px;
    background-color: skyblue;
    width: 300px;
    transition: all linear 0.5s;
    overflow: hidden;
}

HTML:

<button id="more" onclick="increase();">More</button>
<button id="more" onclick="decrease();">Less</button>
<div id="outer">
    <div id="inner">
        lorem ipsum
    </div>
</div>

JS:

function increase()
{
    var o = document.getElementById('inner');
    var t = o.innerHTML;
    for (var i=0 ; i<20;i++)
        t += " lorem ipsum";
    o.innerHTML = t;
    adjustHeight();
}

function decrease()
{
    var o = document.getElementById('inner');
    o.innerHTML = "lorem ipsum";
    adjustHeight();
}

function adjustHeight()
{
    var i = document.getElementById('inner');
    var o = document.getElementById('outer');

    o.style.height = window.getComputedStyle(i).height;
}

Check out the working fiddle: http://jsfiddle.net/Lnts7w1f/

Answer 3

Answer №2

Thanks to the guidance of @jcaron's response, I successfully implemented a sorting feature in a react component. Whenever the 'activeSubsection' button is clicked, the useEffect hook is triggered.

    const [sectionsHeight, setSectionsHeight] = React.useState("0px")
    const sectionsDiv = React.useRef();

    React.useEffect(() => {
        
        setSectionsHeight(sectionsDiv?.current?.offsetHeight + "px")
    
    }, [activeSubsection])

    {!hideSections && 
        <div style={{ overflow: "hidden", height: sectionsHeight, transition: "0.2s" }}>
          <Sections ref={sectionsDiv} className="largeScreen">
            {!!subsectionSections && subsectionSections.sort((a, b) => a.node.slug.localeCompare(b.node.slug)).map((section, index) =>
              <Link key={index} href={'/'+slug+'/'+section.node.slug} scroll={false}>
                <Section
                  active={activeSection == section.node.slug} transition={true} bold={activeSection == section.node.slug}
                >
                  {section.node.title}
                </Section>
              </Link>
            )}
          </Sections>
        </div>
    }

This snippet doesn't cover the entire component, but it should provide a good overview.

Answer 4

Thanks to the guidance of @jcaron's response, I successfully implemented a sorting feature in a react component. Whenever the 'activeSubsection' button is clicked, the useEffect hook is triggered.

    const [sectionsHeight, setSectionsHeight] = React.useState("0px")
    const sectionsDiv = React.useRef();

    React.useEffect(() => {
        
        setSectionsHeight(sectionsDiv?.current?.offsetHeight + "px")
    
    }, [activeSubsection])

    {!hideSections && 
        <div style={{ overflow: "hidden", height: sectionsHeight, transition: "0.2s" }}>
          <Sections ref={sectionsDiv} className="largeScreen">
            {!!subsectionSections && subsectionSections.sort((a, b) => a.node.slug.localeCompare(b.node.slug)).map((section, index) =>
              <Link key={index} href={'/'+slug+'/'+section.node.slug} scroll={false}>
                <Section
                  active={activeSection == section.node.slug} transition={true} bold={activeSection == section.node.slug}
                >
                  {section.node.title}
                </Section>
              </Link>
            )}
          </Sections>
        </div>
    }

This snippet doesn't cover the entire component, but it should provide a good overview.

Answer 5

Answer №3

Here's a little trick you can use in this situation. It may or may not meet your specific requirements.

The magic of css transition effects lies in its ability to animate changes in css properties that have both previous and changed values. In the case of altering the height of a div content, the actual css property height remains unchanged, hence no animation effect is observed.

To work around this limitation, you can calculate the inner height of the div and dynamically set it as its own height, triggering the desired animation. I've devised a function for this purpose, along with a span element to control the inner dimensions of the div.

Simply invoke the function whenever there is a change:

<div class='content'>
  <span id="height-control">
    {{ctrl.content}}
  </span>
</div>

Function in JavaScript:

var spn = document.getElementById("height-control");
var UpdateHeight = function () {
    var h = spn.offsetHeight;
    spn.parentNode.style.height = h + "px";
};

http://plnkr.co/edit/p6QRAR5j4C8d0d0XRJRp?p=preview

Answer 6

Here's a little trick you can use in this situation. It may or may not meet your specific requirements.

The magic of css transition effects lies in its ability to animate changes in css properties that have both previous and changed values. In the case of altering the height of a div content, the actual css property height remains unchanged, hence no animation effect is observed.

To work around this limitation, you can calculate the inner height of the div and dynamically set it as its own height, triggering the desired animation. I've devised a function for this purpose, along with a span element to control the inner dimensions of the div.

Simply invoke the function whenever there is a change:

<div class='content'>
  <span id="height-control">
    {{ctrl.content}}
  </span>
</div>

Function in JavaScript:

var spn = document.getElementById("height-control");
var UpdateHeight = function () {
    var h = spn.offsetHeight;
    spn.parentNode.style.height = h + "px";
};

http://plnkr.co/edit/p6QRAR5j4C8d0d0XRJRp?p=preview

Smoothly animate the height change of dynamically inserted content within a DIV using CSS transitions

Answer №1

Answer №2

Answer №3

Similar questions

Hitting the enter key to choose a value from a dropdown menu will automatically submit the form

The MUI Modal is too large for the display

Reveal Password Feature in Angular After User Click

Dealing with Angular.js $http intercept error "net::ERR_CONNECTION_REFUSED"

The browser is displaying the scene, but the Three.js Geometry is not visible

Flex box causing Bootstrap5 responsive table to overflow

Performance Issues Arise with Rapid Clicking [jQuery]

Creating a responsive web design with a user-friendly CSS grid layout

Hovering over the Laravel Breeze dropdown will activate a dropdown feature

"Embracing Angular2 RC6 with angular-cli: A guide to smoothly upgrading your projects' Angular2 version

Sending simple form information through AJAX to a PHP web service

Position three paragraphs in the center of a div container

Could somebody please clarify the purpose of Bootstrap's `_root.scss` file?

Learn the process of generating sequential heading numbers for topic headings in each HTML document using DTA or XHTML

Executing a callback function in AngularJS after dynamically rendering elements with `ng-repeat`

Raphael JS Path Animation: Wiping Away

Tips for refreshing a specific div element at set intervals using JQuery AJAX?

How to Display Full Lightbox Image on both Tall and Short Height Browsers

unable to load the ajax file

Issue with CSS3 animations