How to use CSS transition for existing list items to make room for new ones?


Tags: javascript,html,css

Problem :

Suppose I have the following HTML:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>AlwaysAtTheEnd</li>
</ul>

After list item 3, I will be inserting a list item 4 using javascript. After that happens, the HTML will look like this:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>AlwaysAtTheEnd</li>
</ul>

However, I want the "AlwaysAtTheEnd" item to smoothly slide down to make room for the new item rather than instantly pop down to make space.

I tried simply adding the following CSS, but it doesn't seem to affect anything:

li {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

Fiddle here: http://fiddle.jshell.net/pcsj2mgb/

EDIT: Fixed fiddle: http://fiddle.jshell.net/pcsj2mgb/1/



Solution :

Can be done with CSS, though you are going to need to define the final height of the li elements so you can animate to that height.

And of course, you need to add the newItem class to the element you're appending, so the CSS affects it.

Update: No need to define a final height! Let's' just animate the max-height. Updated the snippet.

add = function() {
  listItems = document.getElementsByTagName('li');
  var lastItem = listItems[listItems.length - 1]
  var newItem = document.createElement('li');
  newItem.innerHTML = "4";

  newItem.classList.add("newItem");

  lastItem.parentNode.insertBefore(newItem, lastItem);
}
.newItem {
  max-height: 0;
  opacity: 0;
  animation: grow 1s ease-in-out forwards;
  -webkit-animation: grow 1s ease-in-out forwards;
}
@-webkit-keyframes grow {
  to {
    max-height: 20px;
    opacity: 1;
  }
}
@keyframes grow {
  to {
    max-height: 20px;
    opacity: 1;
  }
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>AlwaysAtTheEnd</li>
</ul>
<button onClick="add()">Add</button>


    CSS Howto..

    How to align the wizard to the left and right sides?

    How to target Syntax highlighter with CSS to change font size of code on display

    How or where to add javascript settimeout function to CSS vertical drop down menu

    How do I put an image on top of an image without using absolute positioning?

    How to change visibility of a div css to visible with jQuery

    How to limit height of div when part of 2 vertical divs in fixed parent div

    How to get inputs in the same line with css?

    Speechbubble tooltip in CSS - how to move the arrow

    How to get slanted borders in CSS

    How to “mark” a UL/LI nav item as “active” based on click?

    How to override style of single RichFaces component

    How to make a website run faster?

    How can I find the css error when I run a jquery plugin on IE8?

    how to center UL in my page?

    How to Get CSS/JavaScript Pop-Up to Transition In

    How do I align text to the middle of an element with CSS in Twitter Bootstrap?

    How to make div expand only from bottom down

    How to prevent HTML code in a literal inside a DIV from affecting outer page styles

    How can I trigger jQuery fadeIn() fadeOut() from a
    element

    How to change color of disabled html controls in IE8 using css

    How does Gmail prevent overlap for elements that use absolute positioning?

    How are URLs handled inside the CSS file in CakePHP so they reference the correct location?

    How to indent multiple levels of select optgroup with CSS?

    how to add a class to buttons attribute using css or jquery

    How to make slanted ribbon

    How do I vertically align the text to the middle using CSS?

    How does CSS works under the hood? [closed]

    how to change padding of last element of li in css

    how to switch between left and right css rules using Jquery?

    How to make existing javascript/css files be compitable in Google Chrome?