菜单

AngularJS学习— 动画操作 (Applying Animations) ngAnimate step 12

2019年2月2日 - 金沙前端

给列表项目增加动画

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属性。
一旦想要同时对接三个特性,可以用逗号隔开。

图片 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属性到最近截至得到了一大半浏览器的扶助,然而,须要添加浏览器前缀!其余,@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’,

相关文章

发表评论

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

网站地图xml地图