图片 10

卡通操作,给列表项目增进动画

给列表项目拉长动画

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

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

当网页某有些爆发转移时,增加一些动画有利于让用户掌握发生了什么样职业。因为动画能预报新内容的达到,也许让用户知道新闻被移除。在那篇小说里,将相会到怎么样利用动画帮助新内容的引荐,例如彰显或隐藏列表里的花色。

图片 1

(可在最初的文章查看效果)

Dependencies(依赖的js库):

引入内容

动画片有个很好的用途,它亦可让访客知道你的网址内容在何时发生了转移。当加多或删除内容而尚未别的动画进行联网时,内容的豁然改造会让用户以为纳闷。而因此抬高细微的卡通片就能幸免那种意况发生,并且有助于“公布”有东西将在离开或引入页面。

以下是叁个通过抬高或删除操作来管理列表内容的例证。大很多动画能用来别的品类的内容。假使你发现它们是立见成效的,或有其余想法想增多进去,那么请 联络大家,我们很乐意听听你的想法。

 

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

但有1些地点要求注意。首先,在HTML代码里有五个 ID。一般的话,大家不会用
ID 来安装样式,因为它们的唯一性会引进1些主题材料。然则,它们会在使用
JavaScript 时提供了便利性。

起来列表项目有类名
“show”,正因为那是类名,大家将会在末端通过它为成分增多动画成效。

bower.json

一些 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。因为大家到现在还没动用动画片,所以列表项目会直接出现在页面,像上边那样。当然你也得以点击列表项目,让它们没有。

图片 1

(可在最初的小说查看效果)

复制代码

淡入淡出

作为第一个卡通,大家将会增添贰个简易的淡入淡出效果。相对此前的花色列表,该列表项目多了渐变效果。即便在视觉上看起来依然有1些笨重,但那便于让浏览者有更加长的日子去注意有东西正在转变。

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

{

滑下&淡入淡出

历次增加或删除贰个品种列表都会很突兀,那导致了不调和的遵循。那就让大家通过调控中度来成立一个一发流畅的滑动作效果果。

图片 1

(可在原作查看效果)

那里与地点类名 fade 唯1不一致的是 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;
}

  “name”: “angular-seed”,

旋转进来

而外淡入淡出和滑动效果,仍是可以越来越地抬高1些 3D 效果。浏览器不止能在 X
或 Y 轴上转变来分,还装有深度的气象( Z 轴)。

图片 1

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

为了设置这几个功效,须求定义3个 section 容器作为 3D 过渡的戏台。通过给
perspective 赋值就足以成功。

CSS 的 perspective
代表场景的吃水。四个较低的数值意味着近视角,是一个极端的角度。所以那值得您通过设置分化的值来找到1个适中的值。

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 时间函数。

  “description”: “A starter project for AngularJS”,

侧面旋转

现行反革命咱们只要稍稍调节那么些职能,就能拾一分轻松地创建不一致的设计。上边那一个例子,是让项目列表在侧面旋转。

图片 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 了。

  “version”: “0.0.0”,

浏览器内核前缀和浏览器测试

为了可读性,上面那几个代码都未有包括其余前缀。在那边,小编强烈推荐增多前缀,以援助那么些须求
-webkit
或任何前缀的浏览器。而自个儿使用了 Autoprefixer 来缓解那一个难题。

正因为那个动画片都以在着力的 show/hide
上创设的,所以它们在不帮助那么些动画片的浏览器上优雅地回退。在五花八门的装置和浏览器上进展测试是重点的,但大大多当代浏览器都能援救这个动画片。

打赏辅助本身翻译越多好文章,谢谢!

打赏译者

  “homepage”: “”,

打赏帮助自身翻译更加多好小说,谢谢!

任选一种支付格局

图片 7
图片 8

赞 收藏 1
评论

  “license”: “MIT”,

至于笔者:刘健超-J.c

图片 9

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

图片 10

  “private”: true,

  “dependencies”: {

    “angular”: “1.2.x”,

    “angular-mocks”: “~1.2.x”,

    “bootstrap”: “~3.1.1”,

    “angular-route”: “~1.2.x”,

    “angular-resource”: “~1.2.x”,

    “jquery”: “1.10.2”,

    “angular-animate”: “~1.2.x”

  }

}

复制代码

注:angular-animate供给独自下载,那里运用命令npm install大概 bower
install即可下载 angular-animate.js

 

   假诺供给更加多动画能够构成Jquery中的动画去落实供给.

 

angularjs中是如何达成动画的?
可以参考API:

 

Template(模板)

 

首先,引入angular-animate.js文件,如下:

 

复制代码

  <!– for CSS Transitions and/or Keyframe Animations –>

  <link rel=”stylesheet” href=”css/animations.css”>

  …

  <!– jQuery is used for JavaScript animations (include this before
angular.js) –>

  <script src=”bower_components/jquery/jquery.js”></script>

  …

  <!– required module to enable animation support in AngularJS
–>

  <script
src=”bower_components/angular-animate/angular-animate.js”></script>

 

  <!– for JavaScript Animations –>

  <script src=”js/animations.js”></script>

 

复制代码

其API可以参照:ngAnimate

 

Module & Animations(组件和动画)

 

app/js/animations.js.

 

angular.module(‘phonecatAnimations’, [‘ngAnimate’]);

  // …

  // this module will later be used to define animations

  // …

app/js/app.js

 

复制代码

// …

angular.module(‘phonecatApp’, [

  ‘ngRoute’,

 

  ‘phonecatAnimations’,

  ‘phonecatControllers’,

  ‘phonecatFilters’,

  ‘phonecatServices’,

]);

// …

复制代码

今天,动画效果已经被升迁了.

 

Animating ngRepeat with CSS Transition
Animations(使用CSS过渡效果去达成动画效果)

 

复制代码

<ul class=”phones”>

  <li ng-repeat=”phone in phones | filter:query | orderBy:orderProp”

      class=”thumbnail phone-listing”>

    <a href=”#/phones/{{phone.id}}” class=”thumb”><img
ng-src=”{{phone.imageUrl}}”></a>

    <a href=”#/phones/{{phone.id}}”>{{phone.name}}</a>

    <p>{{phone.snippet}}</p>

  </li>

</ul>

复制代码

app/css/animations.css

 

复制代码

.phone-listing.ng-enter,

.phone-listing.ng-leave,

.phone-listing.ng-move {

  -webkit-transition: 0.5s linear all;

  -moz-transition: 0.5s linear all;

  -o-transition: 0.5s linear all;

  transition: 0.5s linear all;

}

 

.phone-listing.ng-enter,

.phone-listing.ng-move {

  opacity: 0;

  height: 0;

  overflow: hidden;

}

 

.phone-listing.ng-move.ng-move-active,

.phone-listing.ng-enter.ng-enter-active {

  opacity: 1;

  height: 120px;

}

 

.phone-listing.ng-leave {

  opacity: 1;

  overflow: hidden;

}

 

.phone-listing.ng-leave.ng-leave-active {

  opacity: 0;

  height: 0;

  padding-top: 0;

  padding-bottom: 0;

}

复制代码

那里都以因而class去稳固成分的,那么class是什么日期被创制的?

 

ng-enter  class 主要用来新加上的无绳电话机并渲染到页面中.

ng-move  class 首要用来当成分被移位时.

ng-leave  class主要用来被剔除时.