菜单

为列表添加布局动画效果

2019年2月1日 - CSS/CSS3

给列表项目拉长动画

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