给列表项目添加动画

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

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

（可在原文查看效果）

引进内容

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

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

编写HTML代码

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


1

2

3

4

5

<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 元素上使用动画效果，但这将会让通过覆盖样式来添加其它删除元素的动画效果，变得更加困难。


1

2

3

4

5

6

7

8

9

10

11

12

/*

 * 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 也能导致它们消失。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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;

}

这些样式将 li 设置为一个没有项目符合、height 为 0、margin 为 0和 overflow 为 hidden 的矩形。这样做是为了直到添加类名 show，它们才会出现而变得可见。

类名 show 应用了 height 和 margin。因为我们至今还没使用动画，所以列表项目会直接出现在页面，像下面那样。当然你也可以点击列表项目，让它们消失。

（可在原文查看效果）

淡入淡出

作为第一个动画，我们将会添加一个简单的淡入淡出效果。相对之前的项目列表，该列表项目多了渐变效果。虽然在视觉上看起来仍然有一点笨重，但这有利于让浏览者有更长的时间去注意有东西正在变化。

（可在原文查看效果）

因为要在已创建 CSS 片段上添加效果。所以为了在列表上应用这个效果，需要在包围 li 的容器上添加类名 fade。


1

2

3

4

5

6

7

8

.fade li {

  transition: all 0.4s ease-out;

  opacity: 0;

  height: 2em;

}

.fade li.show {

  opacity: 1;

}

滑下&淡入淡出

每次添加或删除一个项目列表都会很突然，这导致了不和谐的效果。那就让我们通过调整高度来创建一个更加流畅的滑动效果。

（可在原文查看效果）

这里与上面类名 fade 唯一不同的是 height:2em 被移除掉了。因为类名 show 已包含了一个高度(继承自第一个CSS片段)，这样高度就会自动过渡了。


1

2

3

4

5

6

7

.slide-fade li {

  transition: all 0.4s ease-out;

  opacity: 0;

}

.slide-fade li.show {

  opacity: 1;

}

旋转进来

除了淡入淡出和滑动效果，还能更进一步地添加一些 3D 效果。浏览器不止能在 X 或 Y 轴上变换元素，还具有深度的场景( Z 轴)。

（可在原文查看效果）

为了设置这个效果，需要定义一个 section 容器作为 3D 过渡的舞台。通过给 perspective 赋值就可以做到。

CSS 的 perspective 代表场景的深度。一个较低的数值意味着近视角，是一个极端的角度。所以这值得你通过设置不同的值来找到一个合适的值。


1

2

3

.swing {

  perspective: 100px;

}

下一步是设置 li 元素在这个舞台里的变形。我们将会使用 opacity 创建淡入淡出效果作为前奏，然后为在舞台上的 li 添加 transform 进行旋转。


1

2

3

4

5

6

7

8

9

10

11

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

}

在这个例子中，让 li 绕X 轴向后旋转 90 度作为初始状态。当添加类名 show 时，它的 transform被设置为 none，这就能让它在舞台上进行过渡了。为了给它旋转效果，我使用了 cubic-bezier 时间函数。

侧面旋转

现在我们只要稍稍调整这个效果，就能十分容易地创建不同的设计。下面这个例子，是让项目列表在侧面旋转。

（可在原文查看效果）

要创建这个效果，我们只需改变旋转轴。


1

2

3

4

5

.swing li {

  opacity: 0;

  transform: rotateY(-90deg);

  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);

}

我们已经把 rotateX 改成 rotateY 了。

浏览器内核前缀和浏览器测试

为了可读性，上面那些代码都没有包含任何前缀。在这里，我强烈推荐添加前缀，以支持那些需要 -webkit 或其他前缀的浏览器。而我使用了 Autoprefixer 来解决这个问题。

正因为这些动画都是在基本的 show/hide 上构建的，所以它们在不支持这些动画的浏览器上优雅地回退。在各种各样的设备和浏览器上进行测试是重要的，但大多数现代浏览器都能支持这些动画。

关于作者： J.c

时间： 2024-08-05 07:06:07

给列表项目添加动画的相关文章

企业级项目，给布局的弹出与吟唱添加动画

企业级项目,布局很枯燥,无奈之余,给布局添加动画, 使用了LayoutTransition 原本只是使用了setVisibility(View.VISIBLE), 但是显示与消失太突然.于是加入了动画, 看代码 http://download.csdn.net/detail/kan1kan5/7965869 //声明动画 resetTransition(); //初始化动画 initAnim(); private void resetTransition() { mTransitioner =

每日学习心得：SharePoint 2013 自定义列表项添加Callout菜单项、文档关注、SharePoint服务端对象模型查询

前言: 前一段时间一直都比较忙,没有什么时间进行总结,刚好节前项目上线,同时趁着放假可以好好的对之前遇到的一些问题进行总结.主要内容有使用SharePoint服务端对象模型进行查询.为SharePoint 自定义列表项添加callout菜单.希望能够给大家带来一些帮助. 1.  在aspx页引用可视化Web部件 有时候会需要在页面中引用项目中创建的可视化Web部件,具体步骤有以下这几步: 1) 在aspx页面顶部注册该可视化Web部件 示例如下: <%@ Register Tagprefix=&qu

viewpager切换添加动画效果viewpager切换添加动画效果--IT蓝豹

viewpager切换添加动画效果,本项目中主要有三种切换特效,(1):DepthPageTransformer 效果(2):RotateDownPageTransformer 每一个view切换的时候旋转(3):ZoomOutPageTransformer 效果主要实现代码:  mViewPager.setPageTransformer(true,new ZoomOutPageTransformer());  mViewPager.setPageTransformer(true,new Rot

ios 添加动画的方法

转自文顶顶大神的博客:http://www.cnblogs.com/wendingding/p/3751519.html ios 开发UI中,经常会用添加动画效果的需求,下面就总结一下,添加动画的三种方式: 一.收尾式动画 // beginAnimations表示此后的代码要“参与到”动画中 [UIView beginAnimations:nil context:nil]; //设置动画时长 [UIView setAnimationDuration:2.0]; self.headImageVie

SharePoint 根据列表项目的元属性按照条件筛选列表项目 Web 部件

SharePoint 根据列表项目的元属性按照条件筛选列表项目 Web 部件 效果截图: 将Web部件添加到列表页面上 删选Country栏目为Germany 筛选城市为Berlin 编辑Web部件,可以选择供筛选的栏目 Web部件下载地址:点击此处下载. 后来知道原来是国人写的. 参考下面的博文: http://www.cnblogs.com/jianyi0115/archive/2011/12/09/2282287.html http://www.cnblogs.com/jianyi0115

js 评论列表推送动画系列一

// qq音乐app观看mv的时候评论推送动画 看到了实现一下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=

侧边栏添加动画挂件和文字

添加动画挂件: http://abowman.com/ 点击进入网址,Start <选择动画>编辑设置>复制嵌入代码>贴到博客侧边栏公告>保存> End 返回博客页面,可以去我博客首页查看效果:http://www.cnblogs.com/lj-cn/ 添加文字: 博客侧边公告栏输入如下代码,文字可修改: <p class="p"> Play or Learn<br/><br/> It's up to you &l

SharePoint 2010 快速隐藏列表项目的下拉菜单

SharePoint 2010 快速隐藏列表项目的下拉菜单 有时候为了不让一些用户编辑列表项,需要隐藏列表项目的下拉菜单.这里提供一个快速的方法,只需要增加一个内容编辑器控件,将css代码写入其HTML源即可. 修改前: 修改后: CSS代码: <style type="text/css"> .s4-ctx{ display:none; } </style> SharePoint 2010 快速隐藏列表项目的下拉菜单,布布扣,bubuko.com

Java生成PDF文档（表格、列表、添加图片等）

需要的两个包及下载地址: (1)iText.jar:http://download.csdn.net/source/296416 (2)iTextAsian.jar(用来进行中文的转换):http://download.csdn.net/source/172399 代码如下: 1 import java.awt.Color; 2 import java.io.FileOutputStream; 3 import com.lowagie.text.Cell; 4 import com.lowagi