2015/05/08 · CSS,
HTML5,
JavaScript · 1
评论 ·
动画
本文由 伯乐在线 –
刘健超-J.c
翻译，周进林
校稿。未经许可，禁止转载！
英文出处：cssanimation.rocks。欢迎加入翻译组。
当网页某部分发生改变时，添加一些动画有利于让用户知道发生了什么事情。因为动画能预告新内容的到达，或者让用户知道信息被移除。在这篇文章里，将会看到如何运用动画帮助新内容的引进，例如显示或隐藏列表里的项目。
Dependencies(依赖的js库):
动画有个很好的用处，它能够让访客知道你的网站内容在何时发生了改动。当添加或删除内容而没有任何动画进行过渡时，内容的突然改变会让用户感到困惑。而通过添加细微的动画就能避免这种情况发生，并且有助于“宣布”有东西将要离开或引进页面。
以下是一个通过添加或删除操作来管理列表内容的例子。大多数动画能用于其它类型的内容。如果你发现它们是有用的，或有其它想法想添加进来，那么请 联系我们，我们很乐意听听你的想法。
在一开始，准备好一个已提前填充好的列表和一个可以为该列表添加新项目的按钮。
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”，正因为这是类名，我们将会在后面通过它为元素添加动画效果。
bower.json
为了实现演示里的动画，将会编写一些 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。因为我们至今还没使用动画，所以列表项目会直接出现在页面，像下面那样。当然你也可以点击列表项目，让它们消失。
复制代码
作为第一个动画，我们将会添加一个简单的淡入淡出效果。相对之前的项目列表，该列表项目多了渐变效果。虽然在视觉上看起来仍然有一点笨重，但这有利于让浏览者有更长的时间去注意有东西正在变化。
因为要在已创建 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;
}
|
{
每次添加或删除一个项目列表都会很突然，这导致了不和谐的效果。那就让我们通过调整高度来创建一个更加流畅的滑动效果。
这里与上面类名 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;
}
|
“name”: “angular-seed”,
除了淡入淡出和滑动效果，还能更进一步地添加一些 3D 效果。浏览器不止能在 X
或 Y 轴上变换元素，还具有深度的场景( Z 轴)。
为了设置这个效果，需要定义一个 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 时间函数。
“description”: “A starter project for AngularJS”,
现在我们只要稍稍调整这个效果，就能十分容易地创建不同的设计。下面这个例子，是让项目列表在侧面旋转。
要创建这个效果，我们只需改变旋转轴。
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”: “https://github.com/angular/angular-seed“,
任选一种支付方式
赞 收藏 1
评论
“license”: “MIT”,
前端，在路上…http://jchehe.github.io
个人主页 ·
我的文章 ·
19 ·
“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:https://docs.angularjs.org/guide/animations
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 {
美高梅59599， opacity: 0;
height: 0;
padding-top: 0;
padding-bottom: 0;
}
复制代码
这里都是通过class去定位元素的,那么class是何时被创建的?
ng-enter class 主要用于新添加的手机并渲染到页面中.
ng-move class 主要用于当元素被移动时.
ng-leave class主要用于被删除时.
