>

乐百家前段:AngularJS学习--- 动画操作 (Applying A

- 编辑:乐百家599手机首页 -

乐百家前段:AngularJS学习--- 动画操作 (Applying A

给列表项目增加动画

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

本文由 伯乐在线 - 刘健超-J.c 翻译,周进林 校稿。未经许可,幸免转载!
葡萄牙共和国(República Portuguesa)语出处:cssanimation.rocks。接待加入翻译组。

当网页某有些产生变动时,增多一些卡通有扶助让客商掌握发生了何等事情。因为动画能预报新内容的达到,可能让客商理解新闻被移除。在此篇小说里,将会看出什么使用动画帮忙新内容的引进,比方展现或遮盖列表里的品种。

乐百家前段 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属性。
一旦想要同不经常候连接多少个属性,能够用逗号隔开分离。

乐百家前段 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。因为咱们现今还没动用动画片,所以列表项目会直接出以后页面,像上面那样。当然你也能够点击列表项目,让它们未有。

乐百家前段 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",

二、关键帧动画

区别于过渡动画只好定义首尾多个情状,关键帧动画能够定义八个状态,或许用关键帧的话来讲,过渡动画只好定义第一帧和末段一帧那三个关键帧,而重大帧动画则能够定义跋扈多的关键帧,因此能兑现更眼花缭乱的动画效果。

注脚:Internet Explorer 9 以致更早的IE版本不帮忙 animation 属性。

<div id="demo">

旋转进来

除了淡入淡出和滑动作效果果,还能够愈来愈地拉长一些 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",

哪些在等级次序中国中国科学技术大学学学、熟悉地应用animation动画?

animation就一定于用@keyframes预先定义好成分在全数过渡进度中将要经历的逐条状态,然后再经过animation属性将这几个境况三次性赋给该因素。

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

侧边旋转

后天大家只要稍稍调节那几个效应,就能够特别轻易地开创分歧的布署性。上面这几个例子,是让项目列表在左边旋转。

乐百家前段 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动画中的帧来评释一(Wissu)个卡通。

首要帧动画的定义情势也正如特别,它采纳了多个首要字 @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>

打赏支持自个儿翻译越来越多好作品,感激!

任选一种支付格局

乐百家前段 9 乐百家前段 10

赞 收藏 1 评论

  "license": "MIT",

连着动画与第一帧动画的分别

animation属性类似于transition,他们都以随着岁月变化而退换成分的属性值,其主要性分化在于:transition要求接触一个事变才会趁机年华更动其CSS属性;animation在不必要接触任何事件的气象下,也得以显式的任何时候间转移来改动成分CSS属性,到达一种动画的效果。

    transition>

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

乐百家前段 11

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

乐百家前段 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是各类要拓宽动画的成分都供给求增多的类。

乐百家前段 13

你也能够在动画实现后,把动画类移除,以便能够重复张开同一个动画。

乐百家前段 14

关于动画的安插参数,举个例子动画片持续时间,动画的推行次数等等,你能够在你的的成分上电动定义,覆盖掉animate.min.css里面所定义的就行了。注意增多浏览器前缀。

乐百家前段 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',

本文由乐百家前段发布,转载请注明来源:乐百家前段:AngularJS学习--- 动画操作 (Applying A