xml地图|网站地图|网站标签 [设为首页] [加入收藏]

美高梅游戏网站

当前位置:美高梅游戏网站 > 美高梅游戏网站 > 给列表项目添加动画

给列表项目添加动画

来源:http://www.gd-chuangmei.com 作者:美高梅游戏网站 时间:2019-09-21 19:59

给列表项目添加动画

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;
}

本文由美高梅游戏网站发布于美高梅游戏网站,转载请注明出处:给列表项目添加动画

关键词:

上一篇:经典排序算法——桶排序

下一篇:没有了