美高梅官方网站3045-mgm6608美高梅app下载
给列表项目添加动画

给列表项目添加动画

作者:mgm美高梅 官方网址    来源:未知    发布时间:2019-11-27 23:09    浏览量:

给列表项目增加动漫

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(暗中认可值卡塔 尔(英语:State of Qatar)规定慢速开始,然后变快,然后慢速甘休的连通效果(cubic-bezier(0.25,0.1,0.25,1)卡塔 尔(英语:State of Qatar)。
  • 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。

注意:要在同样代码块中定义成分起初状态(样式卡塔 尔(英语:State of Qatar),增加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把类加到成分上边。

注意:单纯的代码不会接触任何过渡操作,必要经过顾客的作为(如点击,悬浮等卡塔 尔(英语:State of Qatar)触发。可触及的主意有::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动漫中的帧来声美素佳儿(Friso卡塔尔国个动漫片。

珍视帧动漫的定义方式也正如格外,它利用了叁个根本字 @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(默许值卡塔 尔(英语: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(跳动卡塔 尔(英语:State of Qatar)、flash(闪光卡塔 尔(阿拉伯语:قطر‎、pulse(脉冲卡塔 尔(阿拉伯语:قطر‎、rubber band(橡皮筋卡塔尔、shake(抖动卡塔 尔(英语:State of Qatar)、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(组件和卡通片)

 

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>

友情链接: 网站地图
Copyright © 2015-2019 http://www.zen-40.com. mgm美高梅有限公司 版权所有