动画片操作,列表过渡

给列表项目拉长动画

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

本文由 伯乐在线 –
刘健超-J.c
翻译,周进林
校稿。未经许可,禁止转发!
英文出处:cssanimation.rocks。欢迎到场翻译组。

当网页某部分发生改变时,添加一些动画片有利于让用户知道爆发了哪些业务。因为动画能预报新情节的抵达,或者让用户知道音讯被移除。在那篇文章里,将会看出什么使用动画辅助新情节的引进,例如展现或隐藏列表里的品类。

亚洲必赢官网 1

(可在原文查看效果)

Dependencies(依赖的js库):

vue进入/离开 &
列表过渡

Vue 在插入、更新或者移除 DOM 时,提供多种差距格局的利用接入效果。

包蕴以下工具:

在 CSS 过渡和卡通片中自行应用 class

可以包容使用第三方 CSS 动画库,如 Animate.css

在接入钩子函数中运用 JavaScript 直接操作 DOM

可以合营使用第三方 JavaScript 动画库,如 Velocity.js

正文并非原创,属于摘抄性质,并有个体的加工。

推荐内容

卡通有个很好的用处,它能够让访客知道您的网站内容在何时发生了转移。当添加或删除内容而并未任何动画进行联网时,内容的突然改变会让用户觉得迷惑不解。而经过抬高细微的动画就能避免那种气象时有暴发,并且有助于“发表”有东西就要离开或引进页面。

以下是一个经过丰硕或删除操作来管理列表内容的例子。一大半动画能用来其余品类的内容。若是你发觉它们是实用的,或有其余想法想添加进去,那么请 互换大家,大家很乐意听听你的想法。

 

Vue 提供了 transition 的包裹组件,在下列情状中,可以给任何因素和零部件添加
entering/leaving 过渡

一、过渡动画

过渡(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

规格渲染 (使用 v-if)

怎么在品种中正确、通晓地应用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);
}

 

标准显得 (使用 v-show)

先是步:在对象元素的体制评释中定义元素的起先状态,然后在平等表明中用 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属性。
只要想要同时连接多少个特性,可以用逗号隔开。

亚洲必赢官网 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把类加到元素上边。

注意:单纯的代码不会触发任何衔接操作,须求通过用户的行事(如点击,悬浮等)触发。可触及的艺术有::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”,

<div id=”demo”>

二、关键帧动画

分歧于过渡动画只可以定义首尾多个情景,关键帧动画可以定义七个景况,或者用关键帧的话来说,过渡动画只好定义第一帧和最终一帧那五个关键帧,而根本帧动画则足以定义任意多的关键帧,由此能落成更复杂的动画片效果。

诠释: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”,

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

什么样在档次中科学、熟知地应用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”,

    <transition name=”fade”>

首先步:通过类似Flash动画中的帧来声可瑞康(Karicare)个卡通。

重点帧动画的概念形式也正如很是,它利用了一个关键字 @keyframes
来定义动画。具体格式为:

@keyframes 动画名称 {    时间点 {元素状态}    时间点 {元素状态}    …}

一般的话,0%和100%那四个关键帧是必须求定义的。0%方可由from代替,100%可以由to代替。

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

为了可读性,上面那么些代码都没有包蕴其余前缀。在那边,我强烈推荐添加前缀,以支持那多少个必要
-webkit
或任何前缀的浏览器。而我使用了 Autoprefixer 来解决那几个题目。

正因为这几个动画片都是在着力的 show/hide
上构建的,所以它们在不协理那几个动画片的浏览器上优雅地回退。在五花八门的装置和浏览器上进展测试是第一的,但一大半现代浏览器都能支撑那么些动画片。

打赏支持我翻译愈多好作品,谢谢!

打赏译者

  “homepage”: “”,

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

其次步:在目标元素的体制申明中运用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;}
}

打赏帮衬自己翻译越来越多好作品,谢谢!

任选一种支付办法

亚洲必赢官网 9
亚洲必赢官网 10

赞 收藏 1
评论

  “license”: “MIT”,

    transition>

连通动画与重点帧动画的分别

animation属性类似于transition,他们都是随着岁月变更而变更元素的属性值,其根本分裂在于:transition需求接触一个事变才会趁机时光转移其CSS属性;animation在不必要接触任何事件的情形下,也足以显式的随时间变化来改变元素CSS属性,达到一种动画的功能。

关于作者:刘健超-J.c

亚洲必赢官网 11

前端,在路上…
个人主页 ·
我的文章 ·
19 ·
    

亚洲必赢官网 12

  “private”: true,

    <nav class=”nav”>

三、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”: {

        <ul>

怎么样在类型中科学、谙习地应用animate动画库?

(1):在head中引入animate.min.css文件。
注:由于animate.min.css默许蕴涵所有的卡通效果。由此当大家仅使用其中的多少个卡通效果时,我们最好利用gulp构建仅包罗我们须要的animate.min.css,那样可以防止我们引入的animate.min.css文件体积过大。

    “angular”: “1.2.x”,

            <li>

如何使用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”,

                <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地图