CSS3连接动画韦德娱乐1946网页版,给列表项目增进

2019-10-30 19:28 来源:未知

给列表项目拉长动画

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

本文由 伯乐在线 - 刘健超-J.c 翻译,周进林 校稿。未经许可,禁绝转载!
希腊语出处:cssanimation.rocks。款待参预翻译组。

当网页某部分发生改造时,增加一些卡通有助于让客户领悟爆发了何等专业。因为动画能预报新剧情的到达,也许让客商明白音信被移除。在这里篇小说里,将会看到什么行使动画扶持新内容的引入,举个例子展现或隐敝列表里的门类。

韦德娱乐1946网页版 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属性。
生机勃勃旦想要同一时间连接八个天性,能够用逗号隔断。

韦德娱乐1946网页版 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。因为大家到现在尚未利用动画片,所以列表项目会一贯出今后页面,像上面那样。当然你也能够点击列表项目,让它们未有。

韦德娱乐1946网页版 3

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

复制代码

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

韦德娱乐1946网页版,为目的成分增添伪类或丰富证明了最终状态的类。
应用 transtion 属性只是明确了要什么去过渡,要想让动画片发生,还得要有成分状态的变动。如何改产生分状态呢,当然就是在css中给这些元素定义一个类(:hover等伪类也得以),这一个类描述的是过渡动画甘休时成分的情状。

而外行使hover等系统提供的伪类外,大家也足以无节制的概念本身的类,然后想要过渡时就透过js把类加到成分上边。

注意:单纯的代码不会触发任何过渡操作,供给通过顾客的行为(如点击,悬浮等)触发。可触及的法子有::hover :focus :checked 媒体询问触发 JavaScript触发。

示例1:

韦德娱乐1946网页版 4

示例2:
当鼠标悬停在img元素上时,更改img成分的尺寸。改造的整套经过是平缓对接的,不是高效、突兀的。

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

淡入淡出

作为第二个卡通,大家将会增添贰个粗略的淡入淡出效果。相对早先的门类列表,该列表项目多了渐变效果。即便在视觉上看起来依然有有个别笨重,但那有扶助让浏览者有越来越长的年月去注意有东西正在变化。

韦德娱乐1946网页版 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只可以定义最初景况和甘休状态,无法定义中间状态,约等于说唯有多少个状态。

滑下&淡入淡出

每一趟增加或删除二个类型列表都会很突兀,那变成了不调护医疗的效益。那就让大家经过调节中度来成立二个更是通畅的滑动作效果果。

韦德娱乐1946网页版 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 轴)。

韦德娱乐1946网页版 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属性将这么些意况三次性赋给该因素。

右侧旋转

方今我们借使微微调节那个意义,就能够可怜便于地成立不相同的安插。上边那个事例,是让项目列表在侧边旋转。

韦德娱乐1946网页版 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动画中的帧来声贝因美个动画片。

主要帧动画的概念情势也相比独特,它接受了三个第一字 @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,动画播放为偶数14遍则向前播放,假若为基数词就反方向播放。
  • 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;}
}

打赏扶持作者翻译更加多好作品,多谢!

任选生龙活虎种支付办法

韦德娱乐1946网页版 9 韦德娱乐1946网页版 10

赞 收藏 1 评论

  "license": "MIT",

联网动画与根本帧动画的界别

animation属性相仿于transition,他们都以随着时光转移而改换成分的属性值,其关键差异在于:transition必要接触一个平地风波才会随着时间改造其CSS属性;animation在没有必要接触任何事件的意况下,也得以显式的任何时候间改动来改变成分CSS属性,抵达风流倜傥种动画的效果与利益。

关于我:刘健超-J.c

韦德娱乐1946网页版 11

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

韦德娱乐1946网页版 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是种种要开展动画的要素都一定要要增进的类。

韦德娱乐1946网页版 13

您也足以在动画实现后,把动画类移除,以便能够重复举办同八个卡通。

韦德娱乐1946网页版 14

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

韦德娱乐1946网页版 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: ...

TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:CSS3连接动画韦德娱乐1946网页版,给列表项目增进