HoverTree项目添加了查看留言列表功能,为列表添

作者:计算机知识

给列表项目增进动画

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

本文由 伯乐在线 - 刘健超-J.c 翻译,周进林 校稿。未经许可,禁止转载!
英文出处:cssanimation.rocksHoverTree项目添加了查看留言列表功能,为列表添加布局动画效果。。应接参预翻译组。

当网页某某个产生改动时,增多一些动画有利于让用户掌握发生了什么样专门的学问。因为动画能预先报告新剧情的达到,恐怕让用户领悟音讯被移除。在那篇小说里,将会看到什么利用动画支持新内容的引入,比方呈现或隐藏列表里的连串。

图片 1

(可在原来的书文查看效果)

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

fbx

HoverTree项目增添了翻看留言列表功用

引入内容

动画有个很好的用处,它能够让来访的客人知道您的网址内容在曾几何时发生了变动。当增添或删除内容而从未其他动画实行对接时,内容的黑马改造会让用户感觉狐疑。而通过抬高细微的卡通就能幸免那种意况时有爆发,并且有助于“发表”有东西将在离开或引入页面。

以下是二个由此丰盛或删除操作来保管列表内容的例子。大繁多卡通能用来别的门类的始末。假诺你意识它们是有效的,或有其它主张想添加进去,那么请 联络我们,大家很乐于听听你的主见。

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

}

渴求为fbx格式,导入之后有为数不少装置

页面:HoverTreeWeb项目下
hvtpanel/usermessage/messagelist.aspx

编写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”,正因为那是类名,我们将会在前边通过它为要素增多动画功能。

}

图片 2

加上留言页面:
addmessage.asxp

一些 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);
}

rig 设置 animationtype legacy尽量不要用 humanoid 表示人性动画

能够增进留言后到留言列表查看。

无动画

在最基本的效果中,我们能写一些 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。因为我们现今还没利用动画片,所以列表项目会直接现身在页面,像上边这样。当然你也足以点击列表项目,让它们未有。

图片 3

(可在原来的书文查看效果)

animation 点击import 不然是不奏效的尾声点击aplay才能导入设置

留言列表采纳Repeater控件,那里未来是向来绑定DataTable,假诺是绑定IList,请参考:

本文由bwin必赢发布,转载请注明来源

关键词: 日记本 Android .NET CSS 编程语言