菜单

给列表项目增加动漫

2019年11月8日 - 皇家前端

给列表项目增加动漫

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

本文由 伯乐在线 –
刘健超-J.c
翻译,周进林
校稿。未经许可,防止转载!
斯洛伐克共和国(The Slovak Republic卡塔 尔(阿拉伯语:قطر‎语出处: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

(可在原来的书文查看效果卡塔 尔(英语:State of Qatar)

因为要在已开立 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

(可在原来的书文查看效果卡塔 尔(英语:State of Qatar)

此处与地方类名 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

(可在原著查看效果卡塔 尔(英语:State of Qatar)

要开创这些职能,大家只需改造旋转轴。

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图