Add animations to list items

This article by Bole Online-j.c translation, into the forest School draft. without permission, no reprint!
English Source: Cssanimation.rocks. Welcome to join the translation team.

When a part of the page changes, adding some animations helps the user to know what's going on. Because the animation can predict the arrival of new content, or let the user know that the information is removed. In this article, you'll see how to use animations to help introduce new content, such as showing or hiding items in a list.

(You can see the effect in the original text)

Introduction Content

Animations have a good use to let visitors know when your site's content has changed. When you add or remove content without any animations, a sudden change in content can confuse users. By adding subtle animations, you can avoid this and help "announce" that something is going to leave or introduce a page.

Here is an example of how to manage list content by adding or removing actions. Most animations can be used for other types of content. If you find them useful, or have other ideas you want to add, then please contact us and we'd be happy to hear your thoughts.

Writing HTML code

At the beginning, prepare a pre-populated list and a button to add new items to the list.

12345

<ul id="list"> <li class="show">List item</li> <li class="show">List item</li> </ul><button id="add-to-list">Add a list item</button>

But there are some places to be aware of. First, there are two IDs in the HTML code. In general, we don't use IDs to set styles, because their uniqueness introduces some problems. However, they provide the convenience of using JavaScript.

The initial list item has the class name "show", just because this is the class name, we'll animate the element later through it.

some JavaScript code

To implement the animation in the demo, some JavaScript code is written to add the new list item, and then add the class name "show" to the new Add list item, so that the animation can occur. The rationale for using these two steps is that if the list items are added directly in the visible state, they do not have any transition time and occur directly.

We're going to li use animation effects on elements, but this will make it more difficult to add animations of other deleted elements by overriding the styles.

123456789101112

/* * Add items to a list - from cssanimation.rocks/list-items/ */document.getElementById(‘add-to-list‘).onclick = function() {  var list = document.getElementById(‘list‘);  var newLI = document.createElement(‘li‘);  newLI.innerHTML = ‘A new item‘;  list.appendChild(newLI);  setTimeout(function() {    newLI.className = newLI.className + " show";  }, 10);}

No animations

In the most basic effect, we can write some CSS code to display list items. Because adding class names show makes them visible, deleting the class names show can also cause them to disappear.

12345678910111213141516

li {  list-style: none;  background: #d1703c;  color: #fff;  height: 0;  line-height: 2em;  margin: 0;  padding: 0 0.5em;  overflow: hidden;  width: 10em;}li.show {  height: 2em;  margin: 2px 0;}

These styles will be li set to a rectangle that does not have item conformance, height is 0, margin is 0, and overflow is hidden. This is done so that show they will appear and become visible until the class name is added.

The class name show applies the height and margin. Because we haven't used animations so far, list items will appear directly on the page, as in the following. Of course you can also click on the list items to make them disappear.

(You can see the effect in the original text)

fade in and fade

As the first animation, we'll add a simple fade effect. Relative to the previous list of items, the list item has more gradient effects. Although visually, it still seems a bit cumbersome, but it helps the browser to have a longer time to notice that something is changing.

(You can see the effect in the original text)

fade .

12345678

.fade li {    transition: all Code class= "CSS value" >0.4 s ease-out;    opacity: 0    height : 2em } .fade li. show {    opacity: 1 }

slide down & Fade

Every time you add or delete a list of items, it's a sudden, which results in a jarring effect. Let's create a smoother sliding effect by adjusting the height.

(You can see the effect in the original text)

The only difference between this and the above class name is that it fade height:2em has been removed. Because the class name show already contains a height (inherited from the first CSS fragment), the height is automatically transitioned.

1234567

.slide-fade li {  transition: all0.4s ease-out;  opacity: 0;}.slide-fade li.show{  opacity: 1;}

rotate it in .

In addition to fading and sliding effects, you can add some 3D effects further. Browsers can not only transform elements on the X or Y axis, but also have a depth scene (Z-axis).

(You can see the effect in the original text)

To set this effect, you need to define a section container as the stage for the 3D transition. perspectiveit can be done by assigning values.

The perspective of the CSS represents the depth of the scene. A lower value means a near angle, which is an extreme angle. So it's worth it. You can find a suitable value by setting a different value.

123	.swing {  perspective: 100px;}

The next step is to set the li element's deformation in this stage. We'll use the opacity create fade effect as a prelude, and then rotate the add on the stage li transform .

1234567891011

.swing li {  opacity: 0;  transform: rotateX(-90deg);  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);}.swing li.show {  opacity: 1;  transform: none;  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);}

In this example, let's li rotate the x-axis 90 degrees backwards as the initial state. When the class name is added show , it is transform set to none allow it to transition on the stage. To give it a spin, I used the cubic-bezier time function.

Side Rotation

Now we can easily create different designs with just a little bit of tweaking of this effect. The following example is to make the list of items rotate sideways.

(You can see the effect in the original text)

To create this effect, we only need to change the axis of rotation.

12345

.swing li {    opacity: 0    transform:rotatey ( -90 deg );    transition: all 0.5 s cubic-bezier (. 36 -0.64 ,. 34 1.76 }

We've rotateX changed rotateY it.

Browser kernel prefixes and browser testing

For readability, none of the above code contains any prefixes. Here, I highly recommend adding prefixes to support browsers that require -webkit or other prefixes. And I used the autoprefixer to solve the problem.

Because these animations are built on basic show/hide, they are gracefully rolled back on browsers that do not support these animations. Testing on a wide variety of devices and browsers is important, but most modern browsers can support these animations.

About J.C

Add animations to list items