新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

给列表项目添加动画

给列表项目增进动画

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

前端,在路上... 个人主页 · 小编的小说 · 19 ·     

图片 10

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于www.301net,转载请注明出处:给列表项目添加动画

CSS

您可能还会对下面的文章感兴趣: