给列表项目拉长动画

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

本文由 伯乐在线 –
刘健超-J.c
翻译,周进林
校稿。未经许可,禁绝转载!
立陶宛(Lithuania)语出处:cssanimation.rocks。接待参加翻译组。

当网页某有些发生变动时,增加一些动画片有助于让客商知道发生了何等业务。因为动画能预先报告新内容的达到,可能让顾客知道新闻被移除。在那篇小说里,将会看出哪些运用动画扶助新剧情的推介,比如彰显或遮蔽列表里的品种。

图片 1

(可在原来的小说查看效果)

给列表ListView加多动画效果,首先MainActivity承接自ListView,通过setLayoutAnimation传贰个LayoutAnimationController,就能够安装ListView的动画片效果。
public class MainActivity extends ListActivity {

fbx

HoverTree项目加多了查看留言列表作用

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

页面: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

加上留言页面:
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。因为我们于今还没动用动画片,所以列表项目会一贯出现在页面,像上面那样。当然你也得以点击列表项目,让它们未有。

图片 1

(可在最先的作品查看效果)

animation 点击import 否则是不见效的末段点击aplay工夫导入设置

留言列表选取Repeater控件,这里将来是直接绑定DataTable,倘若是绑定IList,请参考:

留言列表接纳Repeater控件,这里今后是直接绑定DataTable,即使是绑定IList,请参照他事他说加以考察:

淡入淡出

用作第八个卡通,大家将会增添一个总结的淡入淡出效果。相对从前的门类列表,该列表项目多了渐变效果。尽管在视觉上看起来依然有某个笨重,但那有助于让浏览者有越来越长的时日去留意有东西正在变化。

图片 1

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

因为要在已创设 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;
}

增加卡通

运营时请在意修改数据库连接串,在HoverTree.DBTools项目下的KeleyiSQLHelper.cs文件修改。

运作时请留心修改数据库连接串,在HoverTree.DBTools项目下的KeleyiSQLHelper.cs文件修改。

滑下&淡入淡出

老是增加或删除贰个品类列表都会很突兀,那导致了不和煦的效果与利益。那就让大家通过调解中度来创制二个更是流畅的滑行效果。

图片 1

(可在原著查看效果)

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

animator

参考:

参考:

旋转进来

除开淡入淡出和滑动作效果果,仍是可以越来越地增加一些 3D 效果。浏览器不唯有能在 X
或 Y 轴上转换来分,还持有深度的气象( Z 轴)。

图片 1

(可在最先的作品查看效果)

为了设置那些成效,要求定义叁个 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 时间函数。

图片 7

 下载地址:

下载地址:

侧边旋转

后天大家要是稍稍调度这些意义,就会非常便于地创建差别的陈设。上边那个事例,是让项目列表在侧面旋转。

图片 1

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

要创立那些意义,大家只需更动旋转轴。

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
上营造的,所以它们在不援助这一个动画片的浏览器上华贵地回落。在精彩纷呈的设施和浏览器上拓宽测量试验是第一的,但许多当代浏览器都能协助那几个动画片。

打赏援助本人翻译越来越多好小说,谢谢!

打赏译者

图片 9

打赏协助自身翻译愈来愈多好小说,谢谢!

任选一种支付格局

图片 10
图片 11

赞 收藏 1
评论

controller 是场馆机
他是气象切换的设置例如走动切换来向前切换成结束切换来跑步

至于小编:刘健超-J.c

图片 12

前端,在路上…
个人主页 ·
笔者的稿子 ·
19 ·
    

图片 13

avatar 正是事起始入的player的avatar

动态生成物体 

子弹 脚本决定

缓存 类似 tabeview 复用

图片 14

empanyobject

发表评论

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

网站地图xml地图