你的位置:首页 > 软件开发 > Java > 给列表项目添加动画

给列表项目添加动画

发布时间:2015-05-12 10:03:20
本文由 伯乐在线 - J.c 翻译,进林 校稿。未经许可,禁止转载!英文出处:cssanimation.rocks。欢迎加入翻译小组。当网页某部分发生改变时,添加一些动画有利于让用户知道发生了什么事情。因为动画能预告新内容的到达,或者让用户知道信息被移除。在这 ...

给列表项目添加动画

本文由 伯乐在线 - J.c 翻译,进林 校稿。未经许可,禁止转载!

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

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

一些 JavaScript 代码

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

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

1

无动画

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

1

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

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

给列表项目添加动画

(可在原文查看效果)

淡入淡出

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

给列表项目添加动画

(可在原文查看效果)

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

1

滑下&淡入淡出

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

给列表项目添加动画

(可在原文查看效果)

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

1

旋转进来

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

给列表项目添加动画

(可在原文查看效果)

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

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

1

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

1

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

侧面旋转

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

给列表项目添加动画

(可在原文查看效果)

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

1

我们已经把 rotateX 改成 rotateY 了。

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

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

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

关于作者: J.c

原标题:给列表项目添加动画

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录