动漫操作,给列表项目增进动漫

动漫操作,给列表项目增进动漫

给列表项目拉长动漫

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

本文由 伯乐在线 –
刘健超-J.c
翻译,周进林
校稿。未经许可,制止转发!
土耳其共和国(The Republic of Turkey卡塔尔语出处:cssanimation.rocks。迎接参与翻译组。

当网页某某个爆发改变时,增多一些卡通有扶植让客商知道发生了如何职业。因为动漫能预报新剧情的达到,也许让客户精通新闻被移除。在这里篇作品里,将拜访到什么样利用动漫扶持新内容的引荐,举例突显或隐蔽列表里的连串。

图片 1

(可在原来的书文查看效果卡塔 尔(英语:State of Qatar)

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。因为大家至今还未利用动漫片,所以列表项目会一向出今后页面,像下面那样。当然你也得以点击列表项目,让它们未有。

图片 1

(可在原来的文章查看效果卡塔 尔(英语:State of Qatar)

复制代码

第二步:改换成分的情事。

为指标成分增添伪类或丰盛注明了最终状态的类。
应用 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

(可在原来的小说查看效果卡塔 尔(英语:State of Qatar)

因为要在已创立 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卡塔 尔(英语:State of Qatar)transition须求事件触发,所以不得已在网页加载时自动发出。
(2卡塔 尔(英语:State of Qatar)transition是叁遍性的,无法重复发生,除非一再触发。
(3卡塔 尔(英语:State of Qatar)transition只可以定义起初情形和终止状态,不可能定义中间状态,约等于说唯有三个情景。

滑下&淡入淡出

历次加多或删除多个品类列表都会很忽地,那引致了不和谐的功效。那就让大家通过调治中度来创设多个进一层通畅的滑行效果。

图片 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 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动漫中的帧来声爱他美个动漫。

重大帧动画的概念方式也相比较新鲜,它采纳了八个根本字 @keyframes
来定义动漫。具体魄式为:

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

貌似的话,0%和100%那三个关键帧是应当要定义的。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(暗中同意值卡塔 尔(英语:State of Qatar),动漫停止时回来动漫没开始时的状态;
  • 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(脉冲卡塔 尔(英语:State of Qatar)、rubber
    band(橡皮筋卡塔尔国、shake(抖动卡塔尔国、swing(摆荡卡塔 尔(英语:State of Qatar)、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(组件和卡通片)

 

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>

发表评论

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

网站地图xml地图