给列表项目增长动画

2015/05/08 · CSS,
HTML5,
JavaScript · 1
评论
·
动画

本文由 伯乐在线
刘健超-J.c
翻译,周进林
校稿。未经许可,禁止转载!
英文出处:cssanimation.rocks。欢迎参加澳门新葡亰亚洲在线,翻译组

当网页某片发生改变时,添加一些动画片有利于为用户知道有了啊事情。因为动画能预告新内容之抵,或者为用户知道音信给移除。在当时首著作里,将会晤看出什么运用动画帮助新内容的引进,例如展现或隐藏列表里的花色。

澳门新葡亰亚洲在线 1

(可于原文查看效果)

引进内容

动画有个要命好之用处,它可以让访客知道您的网站内容以啥时候发了反。当添加或删除内容一经尚未其它动画举行交接时,内容的突然改变会于用户感到迷惑不解。而经过抬高细微的动画就会免这种景色时有暴发,并且有助于“公布”有物就要离开或引进页面。

以下是一个因而长或去操作来治本列表内容的事例。大多数动画片能用来另外品类的始末。即便你意识它是有效之,或出外想法想补偿加进去,那么要 联系大家,我们非常情愿听听你的想法。

编写HTML代码

在相同先导,准备好一个早就提早填写充好的列表和一个足以吧该列表添加新类型之按钮。

XHTML

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

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 元素上行使动画片效果,但迅即将会给经覆盖样式来上加任何删除元素的动画片效果,变得更加忙绿。

JavaScript

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

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 也可以促成它没有。

CSS

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

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。因为我们至今还没有动用动画片,所以列表项目会直接出现在页面,像下这样。当然你呢得以点击列表项目,让它没有。

澳门新葡亰亚洲在线 2

(可当原文查看效果)

淡入淡出

作第一个卡通,我们将会合补充加一个简便的淡入淡出效果。相对在此之前的类别列表,该列表项目多了逐月变效果。尽管以视觉及看起还暴发一些笨重,但眼看有利于于浏览者有重新丰盛之时错开留意起物在变化。

澳门新葡亰亚洲在线 3

(可在原文查看效果)

以要以曾创建 CSS
片段上补偿加效果。所以为了以列表上行使这效应,需要在包围 li
的容器上加加类名 fade

CSS

.fade li { transition: all 0.4s ease-out; opacity: 0; height: 2em; }
.fade li.show { opacity: 1; }

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

滑下&淡入淡出

老是添加或去一个档列表都晤面生突然,这致使了非协调之效应。这便于我们透过调整中度来创设一个更流畅的滑行效果。

澳门新葡亰亚洲在线 4

(可当原文查看效果)

这边与方类名 fade 唯一不同之是 height:2em 被移除掉了。因为类似名
show 已包含了一个低度(继承自第一独CSS片段),这样低度就会合自动接通了。

CSS

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

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 轴)。

澳门新葡亰亚洲在线 5

(可在原文查看效果)

为设置这些效应,需要定义一个 section 容器作为 3D 过渡的戏台。通过给
perspective 赋值就得就。

CSS 的 perspective
代表场景的深。一个较逊色的数值意味着近视角,是一个极的角度。所以立时值得你通过安装不同之价来找到一个老少咸宜的值。

CSS

.swing { perspective: 100px; }

1
2
3
.swing {
  perspective: 100px;
}

生一样步是安装 li 元素在是舞台里的变形。我们将会师以 opacity
创制淡入淡出效果作为起始,然后为当舞台上的 li 添加 transform
举办盘。

CSS

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

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 时间函数。

侧面旋转

现今大家设稍加有些调整这效用,就可以挺容易地创造不同之筹划。下面是例子,是给项目列表在侧面旋转。

澳门新葡亰亚洲在线 6

(可在原文查看效果)

若果创设是职能,我们一味待转旋转轴。

CSS

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

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
上构建的,所以它在不襄助这一个动画片的浏览器上优雅地回退。在千头万绪的配备及浏览器上展开测试是最重要之,但大部分现代浏览器仍可以帮忙这么些动画片。

打赏援助自翻更多好章,谢谢!


打赏译者

打赏帮助自翻译更多好章,谢谢!

任选一种出情势

澳门新葡亰亚洲在线 7
澳门新葡亰亚洲在线 8

赞 收藏 1
评论

至于作者:刘健超-J.c

澳门新葡亰亚洲在线 9

前端,在路上…http://jchehe.github.io
个人主页
·
我之随笔
·
19
·
    

澳门新葡亰亚洲在线 10

相关文章