菜单

给列表项目增长动画

2018年12月17日 - Html/Html5

深受列表项目增长动画

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

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

当网页某有些来改变时,添加一些动画片有利于让用户知道有了呀业务。因为动画能预告新内容之抵,或者受用户知道音讯被移除。在即时首稿子里,将会合视什么样使动画匡助新内容的引荐,例如呈现或隐藏列表里的类型。

图片 1

(可在原文查看效果)

为列表ListView添加动画效果,首先MainActivity继承自ListView,通过setLayoutAnimation传一个LayoutAnimationController,就可以装ListView的动画片效果。
public class MainActivity extends ListActivity {

引进内容

动画有只万分好的用处,它亦可为访客知道您的网站内容在何时发了改观。当添加或删除内容而并未其他动画举办交接时,内容之突兀改变会吃用户发疑惑。而透过长细微之卡通就会制止这种气象来,并且有助于“公布”有东西将去或引进页面。

以下是一个通过长或去操作来治本列表内容的事例。大多数卡通能用来另外项目标内容。如若你意识她是行之有效之,或发生另想法想补偿加进去,那么请 联系我们,我们死乐意听听你的想法。

private ArrayAdapter<String> adapter;
private LayoutAnimationController lac;
private ScaleAnimation sa;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,new String[]{"Hello","World","jikexueyuan"});


    setListAdapter(adapter);

    sa = new ScaleAnimation(0,1,0,1);
    sa.setDuration(1000);
    lac = new LayoutAnimationController(sa,0.5f);
    getListView().setLayoutAnimation(lac);

}

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

相关文章

发表评论

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

网站地图xml地图