给列表项目增加动漫,列表过渡

by admin on 2019年11月4日

给列表项目拉长动漫

2015/05/08 · CSS,
HTML5,
JavaScript · 给列表项目增加动漫,列表过渡。1
评论 ·
动画

本文由 伯乐在线 –
刘健超-J.c
翻译,周进林给列表项目增加动漫,列表过渡。
校稿。未经许可,禁绝转发!
保加莱切斯特语出处:cssanimation.rocks。款待参与翻译组。

当网页某有个别发生变动时,增添一些动漫有助于让客商知道发生了怎么样专门的职业。因为动漫能预先报告新内容的达到,可能让客商知道音讯被移除。在此篇小说里,将拜会到哪些行使动漫扶助新剧情的推荐介绍,比方呈现或隐蔽列表里的连串。

必发88 1

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

Dependencies(依赖的js库):

本文并不是原创,归属摘抄性质,并有私房的加工。

vue进入/离开 &
列表过渡

Vue 在插入、更新或许移除 DOM 时,提供多样分化格局的运用接入效果。

回顾以下工具:

在 CSS 过渡和动漫中活动应用 class

能够宽容使用第三方 CSS 动漫库,如 Animate.css

在交接钩子函数中使用 JavaScript 直接操作 DOM

能够兼容使用第三方 JavaScript 动漫库,如 Velocity.js

推荐介绍内容

卡通有个很好的用项,它亦可让访客知道你的网站内容在曾几何时爆发了改变。当增添或删除内容而尚未别的动漫进行过渡时,内容的豁然改良会让客商感觉纠缠。而通过丰硕细微的动漫片就会幸免这种情况时有发生,何况有利于“公布”有东西将在离开或引入页面。

以下是二个通过增多或删除操作来保管列表内容的事例。大大多动画片能用于别的类别的剧情。假使您意识它们是立竿见影的,或有此外主张想增加进去,那么请 关系大家,大家很情愿听听你的主见。

 

黄金时代、过渡动漫

过渡(transition)动画,就是从发端状态过渡到甘休状态这几个进程中所爆发的卡通。
所谓的动静正是指大小、地方、颜色、变形(transform卡塔尔国等等这么些属性。

Note:不是独具属性都能接通,独有属性具有多个南路点值技巧有过渡效果。
点击查阅全体列表。

css过渡只可以定义首和尾四个状态,所以是最简便的意气风发种动漫。
注释:Internet Explorer 9 以及更早版本的IE浏览器不协理 transition
属性。

Vue 提供了 transition 的包裹组件,在下列情状中,能够给此外因素和组件增加entering/leaving 过渡

编写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动漫?

标准渲染 (使用 v-if)

一些 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)卡塔 尔(英语:State of Qatar)。
  • 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属性。
只要想要同一时候连接多少个特性,能够用逗号隔断。

必发88 2

基准显得 (使用 v-show)

无动画

在最宗旨的职能中,大家能写一些 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。因为我们于今还未动用动漫片,所以列表项目会直接出未来页面,像上边这样。当然你也足以点击列表项目,让它们未有。

必发88 3

(可在原作查看效果卡塔尔国

复制代码

第二步:纠正成分的情况。

为目的元素增多伪类或加上表明了最后状态的类。
利用 transtion
属性只是显著了要怎么着去过渡,要想让动漫片产生,还得要有成分状态的转移。如何转移成分状态吧,当然就是在css中给那一个因素定义多个类(:hover等伪类也得以卡塔 尔(阿拉伯语:قطر‎,这么些类描述的是联网动漫甘休时成分的意况。

除外使用hover等连串提供的伪类外,大家也得以随意的定义本身的类,然后想要过渡时就因而js把类加到元素上面。

注意:单纯的代码不会接触任何衔接操作,供给通过顾客的表现(如点击,悬浮等卡塔 尔(阿拉伯语:قطر‎触发。可触及的主意有::hover
:focus :checked 媒体询问触发 JavaScript触发。

示例1:

必发88 4

示例2:
当鼠标悬停在img成分上时,改造img成分的尺寸。改良的方方面面进程是平缓对接的,不是火速、突兀的。

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

动态组件

淡入淡出

作为第四个卡通,咱们将会增加八个轻松易行的淡入淡出效果。相对以前的品类列表,该列表项目多了渐变效果。即使在视觉上看起来照旧有好几笨重,但那便于让浏览者有更加长的时刻去留意有东西正在调换。

必发88 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卡塔 尔(英语:State of Qatar)transition必要事件触发,所以不得已在网页加载时自动发出。
(2卡塔 尔(阿拉伯语:قطر‎transition是贰遍性的,无法重新发生,除非反复触发。
(3卡塔 尔(阿拉伯语:قطر‎transition只可以定义带头处境和竣事状态,不能够定义中间状态,约等于说只有四个状态。

零零件根节点

滑下&淡入淡出

老是增加或删除叁个品种列表都会很顿然,那引致了不和谐的功力。那就让大家由此调治中度来创设三个尤其流畅的滑行效果。

必发88 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 属性。

<div id=”demo”>

旋转进来

除却淡入淡出和滑动效果,还可以更为地加上一些 3D 效果。浏览器不独有能在 X
或 Y 轴上调换元素,还具有深度的情形( Z 轴)。

必发88 7

(可在最早的文章查看效果卡塔尔国

必发88,为了设置那个意义,必要定义二个 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属性将这几个景况三遍性赋给该因素。

   <button @click=”show = !show”>Tigglebutton>

左边旋转

今昔大家假设稍微调节这些效果,就会特别便于地成立差别的宏图。上边这几个事例,是让项目列表在侧面旋转。

必发88 8

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

要创建这么些效应,大家只需改动旋转轴。

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替代,百分百得以由to代替。

    <transition name=”fade”>

浏览器内核前缀和浏览器测验

为了可读性,上边那多少个代码都还没包蕴别的前缀。在这里处,笔者生硬推荐增添前缀,以支撑那些急需
-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;}
}

        <p v-if=”show”>hellop>

打赏帮忙自个儿翻译更加多好随笔,多谢!

任选风姿罗曼蒂克种支付格局

必发88 9
必发88 10

赞 收藏 1
评论

  “license”: “MIT”,

连片动漫与根本帧动漫的区分

animation属性肖似于transition,他们都以随着时光转移而更动元素的属性值,其重大差别在于:transition必要接触三个平地风波才会随着时间改换其CSS属性;animation在无需接触任何事件的情状下,也得以显式的任何时候间改变来改换成分CSS属性,到达生龙活虎种动画的效果与利益。

    transition>

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

必发88 11

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

必发88 12

  “private”: true,

三、animate.css动画库

animate.css是一个css3动画库,可以到github上去下载,里面预设了很各种常用的动漫片,使用也很简单,因为它是把分歧的卡通绑定到了不一样的类里,所以大家想要使用哪一种动漫的时候,只须求轻便的把那二个相应的类增加到成分上就可以了。

该库大致包蕴如下这个动漫片效果

  1. bounce(跳动卡塔尔、flash(闪光卡塔 尔(阿拉伯语:قطر‎、pulse(脉冲卡塔 尔(阿拉伯语:قطر‎、rubber
    band(橡皮筋卡塔尔、shake(抖动卡塔尔国、swing(摇动卡塔 尔(英语:State of Qatar)、wobble(摇荡不定卡塔尔国
  2. fade(淡入或抽离卡塔 尔(阿拉伯语:قطر‎
  3. flip(翻转)
  4. rotate(旋转)
  5. slide(滑动)
  6. zoom(放大或减弱卡塔尔国

    <nav class=”nav”>

  “dependencies”: {

怎么着在类型中国科高校学、纯熟地应用animate动漫库?

(1):在head中引入animate.min.css文件。
注:由于animate.min.css私下认可满含全部的动漫效果。由此当大家仅使用在这之中的多少个卡通效果时,大家最棒应用gulp塑造仅包蕴大家须要的animate.min.css,这样可以制止大家引进的animate.min.css文件容量过大。

        <ul>

    “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是各种要开展动画的要素都必定要加上的类。

必发88 13

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

必发88 14

至于动漫的铺排参数,譬如卡通持续时间,动漫的奉行次数等等,你能够在你的的要素上活动定义,覆盖掉animate.min.css里面所定义的就能够了。注意增添浏览器前缀。

必发88 15

参谋资料1
参谋资料2

            <li>

    “angular-mocks”: “~1.2.x”,

                <a href=”#” @click=”show =
!show”
>首页a>

    “bootstrap”: “~3.1.1”,

                <transition name=”fade”>

    “angular-route”: “~1.2.x”,

                    <ul class=”submenu” v-if=”!show”>

    “angular-resource”: “~1.2.x”,

                        <li>首页5li>

    “jquery”: “1.10.2”,

                        <li>首页4li>

    “angular-animate”: “~1.2.x”

                        <li>首页3li>

  }

                        <li>首页2li>

}

                    ul>

复制代码

                transition>

注:angular-animate须要独自下载,这里运用命令npm install大概 bower
install就可以下载 angular-animate.js

            li>

 

            <li><a href=”#”>理念a>li>

   如果急需更加多动漫能够构成Jquery中的动漫去完成须求.

            <li><a href=”#”>历史a>li>

 

            <li><a href=”#”>关于大家a>li>

angularjs中是何等贯彻动漫的?
能够仿照效法API:

            <li><a href=”#”>联系大家a>li>

 

        ul>

Template(模板)

    nav>

 

div>

首先,引入angular-animate.js文件,如下:

new Vue({

 

    el:‘#demo’,

复制代码

    data:{

        show :true

  <!– for CSS Transitions and/or Keyframe Animations –>

    }

  <link rel=”stylesheet” href=”css/animations.css”>

})

  …

<CSS>

  <!– jQuery is used for JavaScript animations (include this before
angular.js) –>

.fade-enter-active,.fade-leave-active{

  <script src=”bower_components/jquery/jquery.js”></script>

    transition: opacity 0.5s;

  …

}

  <!– required module to enable animation support in AngularJS
–>

.fade-enter,.fade-leave-to{

  <script
src=”bower_components/angular-animate/angular-animate.js”></script>

    opacity:0;

 

}

  <!– for JavaScript Animations –>

常用的过渡都以css过渡

  <script src=”js/animations.js”></script>

**vue知识点**

1.*v-on:click  简写成 @click

2.对于那个在 enter/leave 过渡中切换的类名,v- 是那几个类名的前缀。使用
能够重新初始化前缀,例如 v-enter 替换为 my-transition-enter。

 

复制代码

其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: …

发表评论

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

网站地图xml地图