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 hide a div from another div using CSS

    How to make TD behaving like TR(row) with CSS?

    How to get css div to stretch to 100% of window

    how to invoke css file in jquery

    In CSS: how to specify the font you want as being BOTH monospace and sans-serif?

    How to set background color for a boxed link?

    how to make the navbar fixed to top

    How to pass to next line that cutted elements in a list?

    How to provide responsive design for svg?

    Create template page for showing jpg's from direct links [closed]

    How to negate conjunction of two attributes in CSS selector

    How use Append Jquery

    How to switch between multiple CSS animations?

    CSS height as a variable and how to calculate 60% of total screen size

    How to align elements equally in a line in CSS/Bootstrap?

    How granular are CSS rem units?

    How to animate all except one feature with CSS

    How do I do this CSS border-bottom

    How To Set CSS Classes On HTML Tags Which Are Included In The Page With PHP Include's

    How to get these timestamps, which come after in the html, to float right on the same line

    How to reuse and override Css style?

    How to define a rectangular box for arbitrary contents in CSS/HTML?

    How to make two tooltip ids independently close, and remember cookie?

    How to begin typing from vertical middle of textarea

    How to remove gap in masonry?

    How to add a mailto to a sentence without extra spacing?

    How to add jQuery function to hover (show) and then click to show another menu

    How to add a line break
    in
    in HTML

    how to find a class and apply a style with jquery?

    .NET - How to build themes for big CSS files