澳门在线威尼斯官方 > 威尼斯澳门在线 > 动画片操作,给列表项目增加动画

原标题:动画片操作,给列表项目增加动画

浏览次数:120 时间:2019-09-13

给列表项目增进动画

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

本文由 伯乐在线 - 刘健超-J.c 翻译,周进林 校稿。未经许可,禁止转发!
克罗地亚共和国(Republika Hrvatska)语出处: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>

但有点地点供给小心。首先,在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。因为我们到现在还没动用动画片,所以列表项目会直接出现在页面,像上面那样。当然你也足以点击列表项目,让它们未有。

威尼斯澳门在线 2

(可在原著查看效果)

复制代码

淡入淡出

用作第一个卡通,大家将会加多四个简单易行的淡入淡出效果。相对从前的花色列表,该列表项目多了渐变效果。即便在视觉上看起来还是有某个笨重,但那有助于让浏览者有更加长的时刻去留心有东西正在转换。

威尼斯澳门在线 3

(可在原著查看效果)

因为要在已开立 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;
}

{

滑下&淡入淡出

每一遍加多或删除一个品种列表都会很突兀,那产生了不疗养的效能。那就让大家经过调治高度来创建贰个极其通畅的滑动作效果果。

威尼斯澳门在线 4

(可在原来的作品查看效果)

此间与地点类名 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 轴)。

威尼斯澳门在线 5

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

为了设置那个功用,必要定义一个 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",

左边旋转

现行反革命大家假使稍稍调节那些成效,就能够充足轻易地开创分化的宏图。下边那么些事例,是让项目列表在左边旋转。

威尼斯澳门在线 6

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

要创建这么些成效,大家只需改造旋转轴。

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主要用以被删去时.

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:动画片操作,给列表项目增加动画

关键词:

上一篇:没有了

下一篇:Chrome开发者工具不完全指南,闭包拾遗