给列表项目拉长动漫2020欧洲杯冠军竞猜官方网站

时间:2019-11-04 00:27来源:2020欧洲杯冠军竞猜官方网站
给列表项目增进动漫 2015/05/08 · CSS,HTML5,JavaScript · 1评论 ·动画 本文由 伯乐在线 -刘健超-J.c翻译,周进林校稿。未经许可,禁绝转发! 阿尔巴尼亚语出处:cssanimation.rocks。应接参与翻译

给列表项目增进动漫

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

本文由 伯乐在线 - 刘健超-J.c 翻译,周进林 校稿。未经许可,禁绝转发!
阿尔巴尼亚语出处:cssanimation.rocks。应接参与翻译组。

当网页某部分产生变动时,加多一些动漫片有帮助让客商知道发生了怎样业务。因为动漫能预报新内容的到达,恐怕让客户知道消息被移除。在此篇小说里,将拜会到哪些运用动漫支持新故事情节的推荐介绍,比如突显或隐蔽列表里的项目。

2020欧洲杯冠军竞猜官方网站 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。

注意:要在相符代码块中定义成分起头状态(样式卡塔尔国,增添transition属性。
生机勃勃经想要同一时候对接三个属性,能够用逗号隔开分离。

2020欧洲杯冠军竞猜官方网站 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。因为大家到现在还未有利用动漫片,所以列表项目会一贯出以往页面,像下边那样。当然你也足以点击列表项目,让它们未有。

2020欧洲杯冠军竞猜官方网站 3

(可在原著查看效果卡塔尔

复制代码

第二步:改换元素的景色。

为指标元素加多伪类或增多表明了最终状态的类。
行使 transtion 属性只是明显了要怎么去过渡,要想让动漫片发生,还得要有成分状态的校正。怎么样转移成分状态呢,当然便是在css中给这些成分定义叁个类(:hover等伪类也足以卡塔尔国,那几个类描述的是连着动漫截至时成分的图景。

除了这么些之外选拔hover等连串提供的伪类外,大家也能够任性的定义自个儿的类,然后想要过渡时就经过js把类加到成分上面。

注意:单纯的代码不会接触任何过渡操作,须求经过客商的作为(如点击,悬浮等卡塔尔触发。可触及的主意有::hover :focus :checked 媒体询问触发 JavaScript触发。

示例1:

2020欧洲杯冠军竞猜官方网站 4

示例2:
当鼠标悬停在img成分上时,改动img成分的尺码。更换的全套进程是坦荡过渡的,不是神速、突兀的。

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

淡入淡出

用作第二个卡通,大家将会增添贰个回顾的淡入淡出效果。相对在此之前的项目列表,该列表项目多了渐变效果。即便在视觉上看起来依然有几许笨重,但那有扶持让浏览者有更加长的时间去注意有东西正在转换。

2020欧洲杯冠军竞猜官方网站 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只好定义开首情形和得了状态,不可能定义中间状态,也便是说独有三个意况。

滑下&淡入淡出

老是加多或删除多个门类列表都会很忽地,那招致了不协和的作用。这就让大家经过调节高度来制造贰个更为通畅的滑行效果。

2020欧洲杯冠军竞猜官方网站 6

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

那边与地点类名 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 轴)。

2020欧洲杯冠军竞猜官方网站 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属性将这一个处境叁次性赋给该因素。

左边旋转

今日大家如若微微调节那些职能,就会可怜便于地创设不相同的统筹。上边那些事例,是让项目列表在侧边旋转。

2020欧洲杯冠军竞猜官方网站 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,动画播放为偶数13次则向前播放,要是为基数词就反方向播放。
  • 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;}
}

打赏协理笔者翻译更加多好随笔,谢谢!

任选意气风发种支付办法

2020欧洲杯冠军竞猜官方网站 9 2020欧洲杯冠军竞猜官方网站 10

赞 收藏 1 评论

  "license": "MIT",

紧接动漫与根本帧动漫的分裂

animation属性肖似于transition,他们都以随着年华变化而校订成分的属性值,其重大不一致在于:transition必要接触一个事变才会随着时光转移其CSS属性;animation在无需接触任何事件的事态下,也得以显式的任何时候间变更来退换成分CSS属性,到达黄金年代种动漫的功效。

至于小编:刘健超-J.c

2020欧洲杯冠军竞猜官方网站 11

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

2020欧洲杯冠军竞猜官方网站 12

  "private": true,

三、animate.css动画库

animate.css是一个css3动画库,可以到github上去下载,里面预设了很各个常用的动画片,使用也非常粗大略,因为它是把区别的卡通绑定到了不一样的类里,所以大家想要使用哪类动漫的时候,只需求轻巧的把那多少个相应的类增多到成分上就能够了。

该库大概包涵如下那些动漫片效果

  1. bounce(跳动卡塔 尔(阿拉伯语:قطر‎、flash(闪光卡塔 尔(英语:State of Qatar)、pulse(脉冲卡塔 尔(阿拉伯语:قطر‎、rubber band(橡皮筋卡塔 尔(英语:State of Qatar)、shake(抖动卡塔尔国、swing(挥舞卡塔 尔(阿拉伯语:قطر‎、wobble(摇晃不定卡塔尔
  2. fade(淡入或抽离卡塔 尔(英语:State of Qatar)
  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卡塔 尔(英语:State of Qatar)你想要哪个成分举行动漫,就给那么些成分增多上animated类 以致特定的卡通片类名,animated是各类要开展动漫的要素都应当要增多的类。

2020欧洲杯冠军竞猜官方网站 13

你也足以在动漫完结后,把动漫类移除,以便能够重新开展同一个卡通。

2020欧洲杯冠军竞猜官方网站 14

有关动漫的布署参数,举个例子动漫片持续时间,动漫的实施次数等等,你能够在您的的要素上电动定义,覆盖掉animate.min.css里面所定义的就能够了。注意增多浏览器前缀。

2020欧洲杯冠军竞猜官方网站 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>

复制代码

app/css/animations.css

 

复制代码

.phone-listing.ng-enter,

.phone-listing.ng-leave,

.phone-listing.ng-move {

  -webkit-transition: 0.5s linear all;

  -moz-transition: 0.5s linear all;

  -o-transition: 0.5s linear all;

  transition: 0.5s linear all;

}

 

.phone-listing.ng-enter,

.phone-listing.ng-move {

  opacity: 0;

  height: 0;

  overflow: hidden;

}

 

.phone-listing.ng-move.ng-move-active,

.phone-listing.ng-enter.ng-enter-active {

  opacity: 1;

  height: 120px;

}

 

.phone-listing.ng-leave {

  opacity: 1;

  overflow: hidden;

}

 

.phone-listing.ng-leave.ng-leave-active {

  opacity: 0;

  height: 0;

  padding-top: 0;

  padding-bottom: 0;

}

复制代码

那边都以透过class去稳固成分的,那么class是何时被创设的?

 

ng-enter  class 首要用来新扩展长的手提式有线电话机并渲染到页面中.

ng-move  class 首要用以当成分被活动时.

ng-leave  class首要用来被删去时.

手提式有线话机列表被抬高和删除信任于ng-repeat指令,例如,倘若过滤数据时,手提式有线电话机列表会动态的现身列表中.

 

starting class表示一个就要开头的卡通片

active class 代表三个就要截止的动画

 在我们地点的例证中,成分的中度变化从0到120像素当手提式有线电话机被加上和移除时,相近有三个淡入淡出的效率,全数那几个职能都是CSS transitions (CSS 转变器)完毕的.CSS transitions 和 CSS animations对于当下主流的浏览器绝当先四分之风流倜傥都有着很好的帮助,除了IE 9及其更低版本,如果想要一些动漫效果能够尝试基本Javascript的动漫.

 

 

 

ngView

app/index.html.

 

<div class="view-container">

  <div ng-view class="view-frame"></div>

</div>

With this change, the ng-view directive is nested inside a parent element with a view-container CSS class. This class adds aposition: relative style so that the positioning of the ng-view is relative to this parent as it animates transitions.

 

这里运用ng-view取代ng-repeat,在这,ng-view指令被嵌套入三个view-container CSS类,那个类(class)增加了叁个绝对路线以便其动漫效果能够动态显现.上边将看其动漫的实际完成:

 

app/css/animations.css.

 

复制代码

.view-container {

  position: relative;

}

 

.view-frame.ng-enter, .view-frame.ng-leave {

  background: white;

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

}

 

.view-frame.ng-enter {

  -webkit-animation: 0.5s fade-in;

  -moz-animation: 0.5s fade-in;

  -o-animation: 0.5s fade-in;

  animation: 0.5s fade-in;

  z-index: 100;

}

 

.view-frame.ng-leave {

  -webkit-animation: 0.5s fade-out;

  -moz-animation: 0.5s fade-out;

  -o-animation: 0.5s fade-out;

  animation: 0.5s fade-out;

  z-index:99;

}

 

@keyframes fade-in {

  from { opacity: 0; }

  to { opacity: 1; }

}

@-moz-keyframes fade-in {

  from { opacity: 0; }

  to { opacity: 1; }

}

@-webkit-keyframes fade-in {

  from { opacity: 0; }

  to { opacity: 1; }

}

 

@keyframes fade-out {

  from { opacity: 1; }

  to { opacity: 0; }

}

@-moz-keyframes fade-out {

  from { opacity: 1; }

  to { opacity: 0; }

}

@-webkit-keyframes fade-out {

  from { opacity: 1; }

  to { opacity: 0; }

}

复制代码

应用ngClass结合Javascript来促成动漫效果

app/partials/phone-detail.html

 

复制代码

<div class="phone-images">

  <img ng-src="{{img}}"

       class="phone"

       ng-repeat="img in phone.images"

       ng-class="{active:mainImageUrl==img}">

</div>

 

<h1>{{phone.name}}</h1>

 

<p>{{phone.description}}</p>

 

<ul class="phone-thumbs">

  <li ng-repeat="img in phone.images">

    <img ng-src="{{img}}" ng-mouseenter="setImage(img)">

  </li>

</ul>

复制代码

动漫片的准绳是在意"动",首要是岗位或形态的改造发生的动的镜头的进程.

 

其CSS样式如下:

app/css/app.css

 

复制代码

.phone-images {

  background-color: white;

  width: 450px;

  height: 450px;

  overflow: hidden;

  position: relative;

  float: left;

}

 

...

 

img.phone {

  float: left;

  margin-right: 3em;

  margin-bottom: 2em;

  background-color: white;

  padding: 2em;

  height: 400px;

  width: 400px;

  display: none;

}

 

img.phone:first-child {

  display: block;

  }

): bower.json 复制代码 { name: angular-seed, description: A starter project for AngularJS, version: 0.0.0, homepage: ...

编辑:2020欧洲杯冠军竞猜官方网站 本文来源:给列表项目拉长动漫2020欧洲杯冠军竞猜官方网站

关键词: 欧洲杯竞猜