澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

css动画库详解,动画操作

给列表项目拉长动画

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

本文由 伯乐在线 - 刘健超-J.c 翻译,周进林 校稿。未经许可,禁绝转发!
印度语印尼语出处:cssanimation.rocks。招待加入翻译组。

当网页某部分发生变动时,增添一些卡通有助于让客商了然产生了怎么职业。因为动画能预先报告新内容的达到,恐怕让客商领会信息被移除。在这篇小说里,将会看出哪些利用动画扶助新剧情的推荐介绍,举个例子展现或遮蔽列表里的种类。

澳门皇冠金沙网站 1

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

Dependencies(依赖的js库):

正文并非原创,属于摘抄性质,并有私人民居房的加工。

推荐内容

卡通有个很好的用处,它能够让访客知道您的网站内容在曾几何时发生了改观。当增多或删除内容而并未有其余动画举办交接时,内容的突兀更换会让客商感觉纳闷。而透过加多细微的卡通片就能够防止这种意况时有产生,並且有利于“公布”有东西将要离开或引入页面。

以下是三个透过增加或删除操作来治本列表内容的事例。大好多动画片能用于另外门类的剧情。假设您意识它们是卓有成效的,或有其余主见想增添进去,那么请 联络大家,大家很愿意听听你的主见。

 

一、过渡动画

过渡(transition)动画,就是从初始状态过渡到利落状态本条进度中所产生的动画片。
所谓的景况就是指大小、地点、颜色、变形(transform)等等这一个属性。

Note:不是富有属性都能接通,只有属性具备壹其中档点值才享有过渡效果。
点击查阅完全列表。

css过渡只好定义首和尾四个情景,所以是最简易的一种动画。
注释:Internet Explorer 9 以及更早版本的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>

但有一点地方供给小心。首先,在HTML代码里有七个 ID。常常的话,大家不会用 ID 来安装样式,因为它们的独一性会引进一些标题。不过,它们会在动用 JavaScript 时提供了便利性。

初叶列表项目有类名 “show”,正因为那是类名,我们将会在背后通过它为成分加多动画效用。

bower.json

什么样在档期的顺序中准确、纯熟地应用transition动画?

一些 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);
}

 

第一步:在对象成分的体制注脚中定义成分的始发状态,然后在平等表明中用 transition 属性配置动画的各样参数。

可定义的参数有

  • transition-property:规定对哪些属性进行联网。
  • transition-duration:定义过渡的岁月,暗中同意是0。
  • transition-timing-function:定义过渡动画的缓动作效果果,如淡入、淡出等。
  • linear 规定以一样速度开端至甘休的连结效果(等于 cubic-bezier(0,0,1,1))。
  • ease(私下认可值)规定慢速开始,然后变快,然后慢速截止的衔接效果(cubic-bezier(0.25,0.1,0.25,1))。
  • ease-in 规定以慢速开头的连结效果(等于 cubic-bezier(0.42,0,1,1))。
  • ease-out 规定以慢速截止的连接效果(等于 cubic-bezier(0,0,0.58,1))。
  • ease-in-out 规定以慢速最初和了结的对接效果(等于 cubic-bezier(0.42,0,0.58,1))。
  • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自身的值。只怕的值是 0 至 1 以内的数值。
  • transition-delay:规定过渡效果的延迟时间,即在过了那几个时间后才起来动画,暗中同意是0。

注意:要在平等代码块中定义成分开始状态(样式),增多transition属性。
一经想要同期对接五个天性,能够用逗号隔断。

澳门皇冠金沙网站 2

无动画

在最基本的效应中,我们能写一些 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。因为大家现今还没利用动画片,所以列表项目会一直出现在页面,像上边那样。当然你也得以点击列表项目,让它们未有。

澳门皇冠金沙网站 3

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

复制代码

其次步:改换元素的景况。

为对象成分增添伪类或加上申明了最后状态的类。
利用 transtion 属性只是规定了要什么去过渡,要想让动画发生,还得要有成分状态的改造。如何退换成分状态吧,当然就是在css中给这么些因素定义一个类(:hover等伪类也得以),那么些类描述的是联网动画甘休时成分的情形。

除外使用hover等系统提供的伪类外,我们也得以随便的概念本人的类,然后想要过渡时就因此js把类加到元素上边。

注意:单纯的代码不会触发任何衔接操作,需求通过顾客的表现(如点击,悬浮等)触发。可触及的主意有::hover :focus :checked 媒体询问触发 JavaScript触发。

示例1:

澳门皇冠金沙网站 4

示例2:
当鼠标悬停在img成分上时,改造img成分的尺寸。改动的全部进程是平缓对接的,不是高速、突兀的。

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

淡入淡出

用作第多个卡通,我们将会增加一个简练的淡入淡出效果。相对从前的种类列表,该列表项目多了渐变效果。即使在视觉上看起来依旧有点笨重,但那有帮助让浏览者有越来越长的时间去注意有东西正在转变。

澳门皇冠金沙网站 5

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

因为要在已开立 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的独到之处在于轻巧易用,可是它有多少个十分大的局限。
(1)transition须要事件触发,所以不得已在网页加载时自动发出。
(2)transition是一回性的,不可能再度发生,除非屡次触发。
(3)transition只可以定义初步景况和了结状态,无法定义中间状态,也便是说独有五个景况。

滑下&淡入淡出

老是加多或删除多少个类型列表都会很突兀,那致使了不调护治疗的效果与利益。这就让大家经过调解中度来创设一个更是通畅的滑动作效果果。

澳门皇冠金沙网站 6

(可在原著查看效果)

这里与地点类名 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 9 以及更早的IE版本不协理 animation 属性。

旋转进来

除此而外淡入淡出和滑动作效果果,还能够进一步地抬高级中学一年级些 3D 效果。浏览器不仅能在 X 或 Y 轴上转换到分,还具备深度的景观( Z 轴)。

澳门皇冠金沙网站 7

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

为了设置这一个效应,须要定义一个 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",

哪些在品种中国中国科学技术大学学学、熟谙地应用animation动画?

animation就也正是用@keyframes预先定义好成分在全部过渡进度中就要经历的逐个状态,然后再通过animation属性将这个情状一遍性赋给该因素。

侧边旋转

今昔大家只要稍稍调度这几个效应,就能够特别轻巧地开创区别的安顿。下边这么些例子,是让项目列表在侧面旋转。

澳门皇冠金沙网站 8

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

要成立那几个意义,大家只需更动旋转轴。

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动画中的帧来声圣元(Synutra)个卡通。

关键帧动画的定义形式也正如独特,它选取了三个生死攸关字 @keyframes 来定义动画。具体魄式为:

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

貌似的话,0%和百分百那四个关键帧是须要求定义的。0%方可由from替代,百分百方可由to取代。

浏览器内核前缀和浏览器测量检验

为了可读性,上边那多少个代码都不曾包蕴别的前缀。在此间,笔者猛烈推荐加多前缀,以协助那个须求 -webkit 或任何前缀的浏览器。而笔者动用了 Autoprefixer 来消除那个问题。

正因为这一个动画片都以在着力的 show/hide 上创设的,所以它们在不帮助那几个动画片的浏览器上高贵地回降。在多姿多彩的配备和浏览器上开展测验是首要的,但超过一半当代浏览器都能帮助这一个动画片。

打赏协助自个儿翻译愈来愈多好小说,感谢!

打赏译者

  "homepage": "",

其次步:在目的成分的样式评释中运用animation属性调用关键帧表明的动画片。

今天大家清楚了怎么去定义一个最主要帧动画了,那怎么去落到实处这些动画呢?其实很轻便,只要把那一个动画绑定到有个别要开展动画的要素上就行了。把动画绑定到成分上,大家能够动用animation属性。

可铺排的参数有

  • animation-name:none为私下认可值,将尚未任何动画效果,其能够用来覆盖任何动画。
  • animation-duration:暗中认可值为0s,意味着动画周期为0s,约等于没有任何动画效果。
  • animation-timing-function:与transition-timing-function一样。
  • animation-delay:在上马实施动画时供给拭目以俟的时刻。
  • animation-iteration-count:定义动画的广播次数,默以为1,假诺为infinite,则最为次巡回播放。
  • animation-direction:私下认可为nomal,每一回循环都以向前播放,(0-100)。另二个值为alternate,动画播放为偶数十回则向前播放,即便为基数词就反方向播放。
  • animation-state:默认为running,播放,paused,暂停。
  • animation-fill-mode:定义动画初始此前和得了之后发生的操作。
  • none(暗中同意值),动画停止时回来动画没起来时的情景;
  • forwards,动画停止后接二连三运用最终关键帧的任务,即保存在停止状态;
  • backwards,让动画片回到第一帧的情形;
  • both:轮流使用forwards和backwards法规;

注意:只要把定义好的卡通绑定到成分上,就会落到实处主要帧动画了,实际不是像第一种过渡动画那样,要求叁个景观的更动工夫接触动画。
animation属性到最近结束获得了许多浏览器的协助,但是,须要加上浏览器前缀!别的,@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;}
}

打赏帮忙本人翻译更加多好小说,感激!

任选一种支付办法

澳门皇冠金沙网站 9 澳门皇冠金沙网站 10

赞 收藏 1 评论

  "license": "MIT",

连着动画与重大帧动画的分别

animation属性类似于transition,他们都以随着岁月更改而更改成分的属性值,其首要不同在于:transition须要接触一个风云才会趁机年华退换其CSS属性;animation在无需接触任何事件的状态下,也足以显式的随时间转移来改产生分CSS属性,到达一种动画的作用。

有关我:刘健超-J.c

澳门皇冠金沙网站 11

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

澳门皇冠金沙网站 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。

(2)你想要哪个成分进行动画,就给那几个成分增多上animated类 以及特定的卡通类名,animated是种种要举行动画的要素都不能够不要抬高的类。

澳门皇冠金沙网站 13

你也足以在动画达成后,把动画类移除,以便能够再一次进行同二个卡通。

澳门皇冠金沙网站 14

有关动画的配备参数,比方卡通持续时间,动画的实施次数等等,你能够在你的的要素上自行定义,覆盖掉animate.min.css里面所定义的就行了。注意加多浏览器前缀。

澳门皇冠金沙网站 15

参照他事他说加以考察资料1
参考资料2

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

  }

澳门皇冠844网站,}

复制代码

注: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>

本文由澳门皇冠金沙网站发布于前端开发,转载请注明出处:css动画库详解,动画操作