www.qjdy.com-奇迹赌场 > www.qjdy.com官网 > 给列表项目添加动画

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

浏览次数:195 时间:2019-09-26

给列表项目拉长动画

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

本文由 伯乐在线 - 刘健超-J.c 翻译,周进林 校稿。未经许可,禁止转发!
乌Crane语出处: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

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com官网,转载请注明出处:给列表项目添加动画

关键词: CSS bbin手机客户端

上一篇:十大经典排序算法

下一篇:没有了