永利402com官方网站给列表项目增进动画,动画操作

永利402com官方网站 10
永利402com官方网站

给列表项目增进动画

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

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

当网页某部分产生更换时,增多一些卡通有助于让客户领悟发生了怎样事情。因为动画能预先报告新剧情的达到,大概让客户领悟新闻被移除。在那篇文章里,将会看见什么运用动画帮助新剧情的推荐介绍,举例呈现或隐蔽列表里的档案的次序。

永利402com官方网站 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>

但有点地点需求专一。首先,在HTML代码里有七个 ID。日常的话,大家不会用
ID 来设置样式,因为它们的唯意气风发性会引进一些主题素材。不过,它们会在选择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。因为大家到现在还未利用动画片,所以列表项目会一贯出未来页面,像下边那样。当然你也得以点击列表项目,让它们未有。

永利402com官方网站 1

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

复制代码

淡入淡出

用作第八个卡通,大家将会加多一个粗略的淡入淡出效果。相对从前的项目列表,该列表项目多了渐变效果。就算在视觉上看起来依旧有一点笨重,但那便于让浏览者有更加长的年月去在乎有东西正在变化。

永利402com官方网站 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;
}

{

滑下&淡入淡出

历次增加或删除三个类型列表都会很忽地,那致使了不和睦的意义。那就让大家透过调解中度来创建多少个尤其通畅的滑行效果。

永利402com官方网站 1

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

此间与地点类名 fade 独一不一样的是 height:2em永利402com官方网站, 被移除掉了。因为类名
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 轴)。

永利402com官方网站 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 时间函数。

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

侧边旋转

后天我们只要微微调度那么些职能,就能够丰裕轻巧地成立不一样的统筹。下边这些事例,是让项目列表在左边旋转。

永利402com官方网站 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”: “”,

打赏帮衬本身翻译更加多好文章,多谢!

任选生龙活虎种支付办法

永利402com官方网站 7
永利402com官方网站 8

赞 收藏 1
评论

  “license”: “MIT”,

有关小编:刘健超-J.c

永利402com官方网站 9

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

永利402com官方网站 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主要用以被删除时.

手提式有线电话机列表被增添和删除注重于ng-repeat指令,比如,就算过滤数据时,手提式有线电话机列表会动态的产出列表中.

 

starting class表示二个将要开端的动画片

active class 表示一个将要截止的卡通片

 在我们地点的事例中,元素的中度变化从0到120像素当手提式有线话机被加上和移除时,相同有三个淡入淡出的法力,全数那几个功用都以CSS
transitions (CSS 调换器)完结的.CSS transitions 和 CSS
animations对于近年来主流的浏览器绝当先四分之二都有着很好的支撑,除了IE
9及其更低版本,要是想要一些动画片效果可以尝试基本Javascript的动画.

 

 

 

ngView

app/index.html.

 

<div class=”view-container”>

  <div ng-view class=”view-frame”></div>

</div>

With this change, the ng-view directive is nested inside a parent
element with a view-container CSS class. This class adds aposition:
relative style so that the positioning of the ng-view is relative to
this parent as it animates transitions.

 

这边运用ng-view代替ng-repeat,在这里边,ng-view指令被嵌套入三个view-container
CSS类,这些类(class)加多了三个相对路径以便其动画效果能够动态显现.上边将看其动画的实际落到实处:

 

app/css/animations.css.

 

复制代码

.view-container {

  position: relative;

}

 

.view-frame.ng-enter, .view-frame.ng-leave {

  background: white;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

}

 

.view-frame.ng-enter {

  -webkit-animation: 0.5s fade-in;

  -moz-animation: 0.5s fade-in;

  -o-animation: 0.5s fade-in;

  animation: 0.5s fade-in;

  z-index: 100;

}

 

.view-frame.ng-leave {

  -webkit-animation: 0.5s fade-out;

  -moz-animation: 0.5s fade-out;

  -o-animation: 0.5s fade-out;

  animation: 0.5s fade-out;

  z-index:99;

}

 

@keyframes fade-in {

  from { opacity: 0; }

  to { opacity: 1; }

}

@-moz-keyframes fade-in {

  from { opacity: 0; }

  to { opacity: 1; }

}

@-webkit-keyframes fade-in {

  from { opacity: 0; }

  to { opacity: 1; }

}

 

@keyframes fade-out {

  from { opacity: 1; }

  to { opacity: 0; }

}

@-moz-keyframes fade-out {

  from { opacity: 1; }

  to { opacity: 0; }

}

@-webkit-keyframes fade-out {

  from { opacity: 1; }

  to { opacity: 0; }

}

复制代码

应用ngClass结合Javascript来兑现动画效果

app/partials/phone-detail.html

 

复制代码

<div class=”phone-images”>

  <img ng-src=”{{img}}”

       class=”phone”

       ng-repeat=”img in phone.images”

       ng-class=”{active:mainImageUrl==img}”>

</div>

 

<h1>{{phone.name}}</h1>

 

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

 

<ul class=”phone-thumbs”>

  <li ng-repeat=”img in phone.images”>

    <img ng-src=”{{img}}” ng-mouseenter=”setImage(img)”>

  </li>

</ul>

复制代码

卡通的准绳是留意”动”,首假设岗位或形态的更换产生的动的镜头的进度.

 

其CSS样式如下:

app/css/app.css

 

复制代码

.phone-images {

  background-color: white;

  width: 450px;

  height: 450px;

  overflow: hidden;

  position: relative;

  float: left;

}

 

 

img.phone {

  float: left;

  margin-right: 3em;

  margin-bottom: 2em;

  background-color: white;

  padding: 2em;

  height: 400px;

  width: 400px;

  display: none;

}

 

img.phone:first-child {

  display: block;

  }

): bower.json 复制代码 {
name: angular-seed, description: A starter project for AngularJS,
version: 0.0.0, homepage: …

发表评论

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

网站地图xml地图