【金沙js333娱乐场】给列表项目拉长动画

给列表项目拉长动画

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

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

当网页某有个别爆发变动时,添加一些卡通有利于让用户知道产生了怎么事情。因为动画能预先报告新内容的到达,大概让用户知道音讯被移除。在这篇小说里,将会看到哪些行使动画支持新剧情的推荐介绍,例如展现或隐藏列表里的门类。

金沙js333娱乐场 1

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

Dependencies(依赖的js库):

本文并非原创,属于摘抄性质,并有个体的加工。

引进内容

动画有个很好的用途,它能够让访客知道你的网址内容在哪天产生了变更。当添加或删除内容而从不别的动画实行对接时,内容的黑马改变会让用户感到纳闷。而由此添加细微的卡通片就能防止那种情形产生,并且有助于“发表”有东西就要离开或引进页面。

以下是贰个由此抬高或删除操作来治本列表内容的例证。大多数动画片能用来其余项目标剧情。借使你发现它们是立竿见影的,或有其它想法想添加进去,那么请 牵连我们,大家很愿意听听你的想法。

 

1、过渡动画

过渡(transition)动画,就是从开首状态过渡到得了状态本条历程中所发生的动画片。
所谓的动静便是指大小、地方、颜色、变形(transform)等等那几个属性。

Note:不是兼具属性都能联网,唯有属性具有三个中级点值才具备过渡效果。
点击查看全部列表。

css过渡只可以定义首和尾多个状态,所以是最简易的壹种动画。
注释:Internet Explorer 九 以及更早版本的IE浏览器不帮助 transition
属性。

编写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。1般的话,我们不会用
ID 来设置样式,因为它们的唯壹性会引入一些标题。但是,它们会在利用
JavaScript 时提供了便利性。

起来列表项目有类名
“show”,正因为那是类名,我们将会在前面通过它为成分添加动画功效。

bower.json

怎么着在类型中国科高校学、纯熟地应用transition动画?

一些 JavaScript 代码

为了促成演示里的动画,将会编写1些 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);
}

 

第1步:在对象成分的样式声明中定义成分的开端状态,然后在相同申明中用 transition 属性配置动画的各个参数。

可定义的参数有

  • transition-property:规定对哪些属性实行连接。
  • transition-duration:定义过渡的岁月,私下认可是0。
  • transition-timing-function:定义过渡动画的缓动作效果果,如淡入、淡出等。
  • linear 规定以同样速度开始至甘休的交接效果(等于
    cubic-bezier(0,0,一,一))。
  • ease(暗中同意值)规定慢速起首,然后变快,然后慢速甘休的连结效果(cubic-bezier(0.2伍,0.一,0.25,1))。
  • ease-in 规定以慢速开首的交接效果(等于 cubic-bezier(0.4二,0,一,壹))。
  • ease-out 规定以慢速截至的过渡效果(等于 cubic-bezier(0,0,0.5八,一))。
  • ease-in-out 规定以慢速起始和完工的连片效果(等于
    cubic-bezier(0.4二,0,0.5八,一))。
  • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义本身的值。可能的值是
    0 至 壹 时期的数值。
  • transition-delay:规定过渡效果的延迟时间,即在过了那几个小时后才起来动画,暗中认可是0。

注意:要在平等代码块中定义成分早先状态(样式),添加transition属性。
假如想要同时对接陆特特性,可以用逗号隔断。

金沙js333娱乐场 2

无动画

在最基本的成效中,我们能写1些 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。因为咱们到现在还没利用动画片,所以列表项目会平素出现在页面,像上面那样。当然你也足以点击列表项目,让它们没有。

金沙js333娱乐场 1

(可在原著查看效果)

复制代码

其次步:改变成分的情景。

为对象成分添加伪类或丰裕评释了最终状态的类。
应用 transtion
属性只是鲜明了要怎么着去过渡,要想让动画片爆发,还得要有成分状态的变动。怎样转移成分状态呢,当然就是在css中给那个成分定义一个类(:hover等伪类也得以),这几个类描述的是对接动画停止时成分的意况。

除了那几个之外运用hover等系统提供的伪类外,大家也得以随便的概念自个儿的类,然后想要过渡时就透过js把类加到成分上边。

注意:单纯的代码不会接触任何过渡操作,须求经过用户的一言一动(如点击,悬浮等)触发。可触及的方法有::hover
:focus :checked 媒体询问触发 JavaScript触发。

示例1:

金沙js333娱乐场 4

示例2:
当鼠标悬停在img元素上时,改变img成分的尺码。改变的总体经过是一马平川过渡的,不是快速、突兀的。

img {
    height:15px;  /*初始值*/
    width:15px;
    transition:1s1s height; /*过渡*/
}
img:hover {
    height:450px; /*最终值*/
    width:450px;
}

淡入淡出

作为第三个卡通,大家将会添加一个不难易行的淡入淡出效果。相对在此之前的类别列表,该列表项目多了渐变效果。尽管在视觉上看起来依然有好几笨重,但那便于让浏览者有更长的大运去留意有东西正在转变。

金沙js333娱乐场 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;
}

{

对接动画的局限性

transition的独到之处在于简单易用,可是它有几个一点都不小的局限。
(壹)transition要求事件触发,所以不得已在网页加载时自动发出。
(2)transition是二次性的,不可能重复发生,除非1再触发。
(三)transition只好定义初叶处境和终结状态,不能够定义中间状态,也等于说只有七个情景。

滑下&淡入淡出

历次添加或删除2个类别列表都会很突兀,那造成了不和谐的作用。这就让大家透过调整高度来创设多个越来越流畅的滑行效果。

金沙js333娱乐场 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”,

二、关键帧动画

差异于过渡动画只好定义首尾多少个情状,关键帧动画能够定义多少个状态,可能用关键帧的话来说,过渡动画只好定义第二帧和结尾一帧那多少个关键帧,而首要帧动画则足以定义任意多的关键帧,因此能完结更复杂的动画片效果。

诠释:Internet Explorer 玖 以及更早的IE版本不匡助 animation 属性。

旋转进来

而外淡入淡出和滑动效果,还能够特别地抬高1些 3D 效果。浏览器不止能在 X
或 Y 轴上变换到分,还存有深度的风貌( Z 轴)。

金沙js333娱乐场 1

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

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

CSS 的 perspective
代表场景的吃水。三个较低的数值意味着近视角,是二个Infiniti的角度。所以那值得您通过设置不一样的值来找到三个正好的值。

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”,

什么在档次中国中国科学技术大学学学、熟识地应用animation动画?

animation就一定于用@keyframes预先定义好成分在全数过渡进程中即将经历的依次状态,然后再经过animation属性将这几个景况一次性赋给该因素。

侧面旋转

今日我们即便稍稍调整这几个作用,就能13分便于地创造区别的统一筹划。上边那个事例,是让项目列表在侧面旋转。

金沙js333娱乐场 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”,

率先步:通过类似Flash动画中的帧来声美赞臣(Meadjohnson)个动画。

最首要帧动画的定义格局也相比较新鲜,它选取了二个主要字 @keyframes
来定义动画。具体格式为:

@keyframes 动画名称 {    时间点 {元素状态}    时间点 {元素状态}    …}

相似的话,0%和百分百那八个关键帧是必要求定义的。0%得以由from代替,百分百足以由to代替。

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

为了可读性,上面那叁个代码都尚未包括其余前缀。在此处,笔者强烈推荐添加前缀,以支撑那个急需
-webkit
或其余前缀的浏览器。而作者动用了 Autoprefixer 来消除那几个难题。

正因为那一个动画片都以在主导的 show/hide
上营造的,所以它们在不帮衬那么些动画片的浏览器上优雅地回退。在5光10色的装备和浏览器上海展览中心开测试是人命关天的,但超越二分之一现代浏览器都能补助那一个动画片。

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

打赏译者

  “homepage”: “”,

第三步:在目的成分的体制证明中运用animation属性调用关键帧证明的动画片。

现行反革命我们知晓了怎么去定义三个第2帧动画了,那怎么去实现那些动画呢?其实很简短,只要把这么些动画绑定到有些要拓展动画的因素上就行了。把动画绑定到成分上,大家能够动用animation属性。

可配置的参数有

  • animation-name:none为暗许值,将从未其余动画效果,其得以用来覆盖任何动画。
  • animation-duration:私下认可值为0s,意味着动画周期为0s,也正是未有此外动画效果。
  • animation-timing-function:与transition-timing-function一样。
  • animation-delay:在开头推行动画时要求拭目以俟的年月。
  • animation-iteration-count:定义动画的播报次数,默许为一,假如为infinite,则极端次巡回播放。
  • animation-direction:默许为nomal,每趟循环都在此以前进播放,(0-100)。另2个值为alternate,动画播放为偶多次则向前播放,要是为基数词就反方向播放。
  • animation-state:默认为running,播放,paused,暂停。
  • animation-fill-mode:定义动画开端在此之前和了结以往发出的操作。
  • none(暗许值),动画结束时回来动画没起来时的景色;
  • forwards,动画甘休后持续使用最后关键帧的地点,即保存在停止状态;
  • backwards,让动画片回到第三帧的事态;
  • both:轮流使用forwards和backwards规则;

注意:只要把定义好的动画绑定到成分上,就能促成重大帧动画了,而不是像第1种过渡动画这样,供给3个场地包车型地铁转移才能接触动画。
animation属性到近年来停止获得了超过5贰%浏览器的支撑,不过,必要添加浏览器前缀!此外,@keyframes必供给加webkit前缀。

示例:

div:hover {
    -webkit-animation:1s changeColor; /*调用动画*/
    animation:1s changeColor;
}
@-webkit-keyframes changeColor { /*声明动画*/
    0% {background:#c00;}
    50%{background:orange;}
    100%{background:yellowgreen;}
}
@keyframes changeColor {
    0%{background:#c00;}
    50%{background:orange;}
    100%{background:yellowgreen;}
}

打赏接济笔者翻译越来越多好小说,多谢!

任选1种支付办法

金沙js333娱乐场 9
金沙js333娱乐场 10

赞 收藏 1
评论

  “license”: “MIT”,

接通动画与主要帧动画的界别

animation属性类似于transition,他们都是随着时间变更而变更成分的属性值,其利害攸关区别在于:transition须求接触3个风浪才会趁机年华变更其CSS属性;animation在不供给接触任何事件的意况下,也足以显式的随时间转移来改变成分CSS属性,达到壹种动画的效用。

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

金沙js333娱乐场 11

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

金沙js333娱乐场 12

  “private”: true,

三、animate.css动画库

animate.css是一个css3动画库,可以到github上去下载,里面预设了很三种常用的动画片,使用也很简单,因为它是把差异的动画绑定到了区别的类里,所以大家想要使用哪一种动画的时候,只须求不难的把万分相应的类添加到成分上就行了。

该库大概包括如下这个动画片效果

  1. bounce(跳动)、flash(闪光)、pulse(脉冲)、rubber
    band(橡皮筋)、shake(抖动)、swing(摇摆)、wobble(摇摆不定)
  2. fade(淡入或剥离)
  3. flip(翻转)
  4. rotate(旋转)
  5. slide(滑动)
  6. zoom(放大或收缩)

  “dependencies”: {

什么在档次中正确、纯熟地应用animate动画库?

(1):在head中引入animate.min.css文件。
注:由于animate.min.css私下认可包涵全体的动画片效果。因而当我们仅使用在那之中的多少个卡通效果时,大家最棒应用gulp创设仅包罗大家要求的animate.min.css,那样可防止止大家引入的animate.min.css文件容积过大。

    “angular”: “1.2.x”,

什么样选用gulp创设符合大家要求的animate.min.css?

先是步:将全方位animate.css项目下载下来,作为生产环境的借助

npm install animate.css --save

第一步:进入animate.css项目根目录下

$cd path/to/animate.css/

第三步:加载dev依赖

npm install 

第五步:根据实际必要修改animate-config.json文件
诸如:大家只须求那五个卡通效果:bounceIn和bounceOut。

{
    "bouncing_entrances": [
        "bounceIn"
    ],
    "bouncing_exits": [
        "bounceOut"
    ]
}

终极一步:进入animate.css项目下,运维gulp职分:gulp
default,生成新的animate.min.css覆盖暗中同意的animate.min.css。

(二)你想要哪个成分举办动画,就给那一个成分添加上animated类
以及特定的动画类名,animated是各样要举办动画的因素都不能够不要加上的类。

金沙js333娱乐场 13

您也得以在动画达成后,把动画类移除,以便能够再一次举办同四个动画片。

金沙js333娱乐场 14

有关动画的布局参数,比如卡通持续时间,动画的履行次数等等,你可以在您的的因素上自行定义,覆盖掉animate.min.css里面所定义的就行了。注意添加浏览器前缀。

金沙js333娱乐场 15

参考资料壹
参考资料二

    “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>

发表评论

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