【4858美高梅】列表过渡,动画操作

By admin in 4858美高梅 on 2019年10月6日

给列表项目拉长动画

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

本文由 伯乐在线 –
刘健超-J.c
翻译,周进林
校稿。未经许可,禁止转载!
土耳其共和国(The Republic of Turkey)语出处:cssanimation.rocks。招待加入翻译组。

当网页某有些发生改动时,加多一些卡通有协理让客商知道发生了怎么着事情。因为动画能预报新内容的达到,可能让顾客知道音信被移除。在那篇文章里,将会见到如何选用动画帮忙新内容的引荐,举例突显或遮盖列表里的体系。

4858美高梅 1

(可在原作查看效果)

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))。
  • 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属性。
假定想要同期连接多个天性,能够用逗号隔开分离。

4858美高梅 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。因为大家到现在还没利用动画片,所以列表项目会平素出现在页面,像下边那样。当然你也得以点击列表项目,让它们未有。

4858美高梅 3

(可在原著查看效果)

复制代码

第二步:改变成分的情状。

为目的成分增添伪类或增多证明了最终状态的类。
使用 transtion
属性只是明确了要怎么样去过渡,要想让动画片发生,还得要有元素状态的变动。怎么样转移成分状态吧,当然正是在css中给那一个因素定义一个类(:hover等伪类也足以),那些类描述的是过渡动画停止时成分的境况。

除了这几个之外行使hover等系统提供的伪类外,大家也足以Infiniti制的概念本身的类,然后想要过渡时就通过js把类加到成分上边。

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

示例1:

4858美高梅 4

示例2:
当鼠标悬停在img成分上时,改动img成分的尺码。改造的全体经过是平整过渡的,不是快捷、突兀的。

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

动态组件

【4858美高梅】列表过渡,动画操作。淡入淡出

用作第贰个卡通,我们将会增加贰个简短的淡入淡出效果。相对此前的花色列表,该列表项目多了渐变效果。尽管在视觉上看起来仍然有少数笨重,但这有助于让浏览者有越来越长的时日去注意有东西正在调换。

4858美高梅 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只可以定义最初情况和截止状态,无法定义中间状态,也便是说独有多个状态。

组件根节点

滑下&淡入淡出

老是增多或删除多个类型列表都会很突兀,那导致了不调剂的效果与利益。那就让大家通过调度中度来创立三个更是流畅的滑动作效果果。

4858美高梅 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 属性。

<div id=”demo”>

旋转进来

除开淡入淡出和滑动作效果果,还能够特别地加上一些 3D 效果。浏览器不独有能在 X
或 Y 轴上转变元素,还持有深度的光景( Z 轴)。

4858美高梅 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属性将这么些意况三次性赋给该因素。

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

侧边旋转

现行反革命我们只要稍稍调度那几个意义,就可以充分轻松地开创差别的安顿。上边这么些例子,是让项目列表在侧边旋转。

4858美高梅 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 改成 rotateY4858美高梅, 了。

  “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(默许值),动画截止时回来动画没初步时的景色;
  • 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>

打赏帮衬作者翻译更加的多好小说,感激!

任选一种支付办法

4858美高梅 9
4858美高梅 10

赞 收藏 1
评论

  “license”: “MIT”,

紧接动画与第一帧动画的区分

animation属性类似于transition,他们都以随着年华变化而改换成分的属性值,其首要性分歧在于:transition须要接触八个事件才会随着时间改造其CSS属性;animation在不需求接触任何事件的场所下,也得以显式的随时间更换来退换元素CSS属性,达到一种动画的功力。

    transition>

至于笔者:刘健超-J.c

4858美高梅 11

前端,在路上…
个人主页 ·
小编的小说 ·
19 ·
    

4858美高梅 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(放大或缩短)

    <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)你想要哪个元素进行动画,就给那几个成分增多上animated类
以及特定的卡通类名,animated是每种要进行动画的因素都供给求加多的类。

4858美高梅 13

你也得以在动画完毕后,把动画类移除,以便能够另行张开同二个动画。

4858美高梅 14

关于动画的配置参数,例如动画片持续时间,动画的施行次数等等,你能够在您的的成分上机关定义,覆盖掉animate.min.css里面所定义的就行了。注意增添浏览器前缀。

4858美高梅 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地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有