给列表项目添加动画

2024-04-27 14:09:17

字体：大中小

来源：转载

供稿：网友

给列表项目添加动画

本文由伯乐在线-J.c翻译，进林校稿。未经许可，禁止转载！英文出处：CSSanimation.rocks。欢迎加入翻译小组。

当网页某部分发生改变时，添加一些动画有利于让用户知道发生了什么事情。因为动画能预告新内容的到达，或者让用户知道信息被移除。在这篇文章里，将会看到如何运用动画帮助新内容的引进，例如显示或隐藏列表里的项目。

（可在原文查看效果）

引进内容

动画有个很好的用处，它能够让访客知道你的网站内容在何时发生了改动。当添加或删除内容而没有任何动画进行过渡时，内容的突然改变会让用户感到困惑。而通过添加细微的动画就能避免这种情况发生，并且有助于“宣布”有东西将要离开或引进页面。

以下是一个通过添加或删除操作来管理列表内容的例子。大多数动画能用于其它类型的内容。如果你发现它们是有用的，或有其它想法想添加进来，那么请联系我们，我们很乐意听听你的想法。

编写HTML代码

在一开始，准备好一个已提前填充好的列表和一个可以为该列表添加新项目的按钮。

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>

但有一些地方需要注意。首先，在HTML代码里有两个 ID。一般来说，我们不会用 ID 来设置样式，因为它们的唯一性会引入一些问题。然而，它们会在使用 javaScript 时提供了便利性。

初始列表项目有类名 “show”，正因为这是类名，我们将会在后面通过它为元素添加动画效果。

一些 Javascript 代码

为了实现演示里的动画，将会编写一些 JavaScript 代码来添加新列表项目，然后为新添加列表项目添加类名 “show”，以至动画能够发生。使用这两个步骤的理由是，如果列表项目直接以可见的状态添加进来，它们就没有任何过渡时间而直接发生了。

我们打算在li元素上使用动画效果，但这将会让通过覆盖样式来添加其它删除元素的动画效果，变得更加困难。

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);}

无动画

在最基本的效果中，我们能写一些 CSS 代码显示列表项目。因为添加类名show让它们可见，所以删掉类名show也能导致它们消失。

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;}