奥门金沙手机娱乐网址 15

CSS3连接动漫&关键帧动漫&animate.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卡塔尔(英语:State of Qatar))。
  • 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卡塔尔(英语:State of Qatar))。
  • 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。因为大家到现在尚未动用动漫片,所以列表项目会一贯出今后页面,像上边那样。当然你也得以点击列表项目,让它们未有。

奥门金沙手机娱乐网址 1

(可在最先的小说查看效果)

复制代码

其次步:改动成分的情况。

为对象成分加多伪类或增添证明了最后状态的类。
接收 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;
}

淡入淡出

用作第二个卡通,大家将会增多二个简约的淡入淡出效果。相对在此之前的类型列表,该列表项目多了渐变效果。尽管在视觉上看起来依旧有一点笨重,但那有补助让浏览者有更长的时日去留意有东西正在变化。

奥门金沙手机娱乐网址 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的长处在于轻巧易用,可是它有多少个一点都不小的局限。
(1)transition须求事件触发,所以不得已在网页加载时自动发出。
(2)transition是一次性的,不能够再度产生,除非一再触发。
(3)transition只可以定义开端景况和得了状态,不能够定义中间状态,也正是说唯有七个状态。

滑下&淡入淡出

老是增多或删除一个门类列表都会很突兀,那导致了不和煦的功用。那就让大家因而调解中度来创设贰个一发通畅的滑行效果。

奥门金沙手机娱乐网址 1

(可在原作查看效果)

此地与地点类名 fade 独一分化的是 height:2em 被移除掉了。因为类名
show 已富含了二个莫斯中国科学技术大学学(世袭自第二个CSS片段卡塔尔(英语:State of Qatar),那样中度就能够活动接入了。

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 轴卡塔尔国。

奥门金沙手机娱乐网址 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”,

何以在项目中精确、熟习地应用animation动漫?

animation就一定于用@keyframes预先定义好成分在一切过渡进度中将要涉世的逐一状态,然后再通过animation属性将这个情况叁次性赋给该因素。

左边旋转

这段日子大家只要微微调治这几个效应,就会丰硕便于地创制不一致的安顿。下边这一个例子,是让项目列表在侧边旋转。

奥门金沙手机娱乐网址 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动漫中的帧来声明风姿洒脱(Wissu卡塔尔(英语:State of Qatar)个动漫片。

主要帧动漫的概念方式也正如特别,它使用了贰个第一字 @keyframes
来定义动漫。具体魄式为:

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

日常的话,0%和百分百那多个关键帧是应当要定义的。0%得以由from替代,100%足以由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”

  }

}

复制代码

注: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(组件和卡通卡塔尔(英语:State of Qatar)

 

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过渡效果去完成动漫效果卡塔尔(英语:State of Qatar)

 

复制代码

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