相对于js动画来说用起来更快速简单,install即可

给列表项目增进动画

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

当transition遇上display

2016/01/13 · CSS · 5 评论 · display, transition

原作出处: 携程设计划委员会员会   

相信大家在试用css3动画片时候一定用过transition属性,绝对于js动画来说用起来越来越高速简单。
代码如下:
HTML结构:

XHTML

<div id="box"></div> <button>动画按键</button>

1
2
<div id="box"></div>
<button>动画按钮</button>

CSS代码:

CSS

.box { background: goldenrod; width: 300px; height: 300px; margin: 30px auto; transition: all .4s linear; /*display: block;*/ } .hidden { /*display: none;*/ opacity: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all .4s linear;
    /*display: block;*/
}
 
.hidden {
    /*display: none;*/
    opacity: 0;
}

JS代码

JavaScript

var box = $('#box'); $('button').on('click', function () { if(box.hasClass('hidden')){ box.removeClass('hidden'); }else{ box.addClass('hidden'); } });

1
2
3
4
5
6
7
8
var box = $('#box');
$('button').on('click', function () {
    if(box.hasClass('hidden')){
        box.removeClass('hidden');
    }else{
        box.addClass('hidden');
    }
});

在点击开关后方可看出淡入淡出的动画片效果,不过在css代码中革除对于display属性的两段注释现在,再张开浏览器一看,淡入淡出的效果全没了。
那几乎是破坏性的机能,然后本人度娘了一晃总括了多少个艺术。

第一种艺术:将display用visibility来代替,我们都精晓visibility的意义实在跟display在断定程度上一般,那怎么说只是一定水准上一般呢,因为它照旧是占空间的,那您早舞会说,这么用跟opacity没啥差别呀。但却得以制止遮挡上面包车型地铁层比方按键的点击事件。

第三种艺术是对峙于第一种格局的进级,利用了js的setTimout和transitionend事件
css代码 将class hidden类中的opacity分离出来

CSS代码:

CSS

.box { background: goldenrod; width: 300px; height: 300px; margin: 30px auto; transition: all .4s linear; visibility: visible; } .hidden { display: none; } .visuallyhidden { opacity: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all .4s linear;
    visibility: visible;
}
.hidden {
    display: none;
}
.visuallyhidden {
    opacity: 0;
}

js代码

JavaScript

var box = $('#box'); $('button').on('click', function () { if (box.hasClass('hidden')) { box.removeClass('hidden'); setTimeout(function () { box.removeClass('visuallyhidden'); }, 20); } else { box.addClass('visuallyhidden'); box.one('transitionend', function(e) { box.addClass('hidden'); }); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var box = $('#box');
$('button').on('click', function () {
    if (box.hasClass('hidden')) {
        box.removeClass('hidden');
        setTimeout(function () {
            box.removeClass('visuallyhidden');
        }, 20);
    } else {
        box.addClass('visuallyhidden');
        box.one('transitionend', function(e) {
            box.addClass('hidden');
        });
    }
});

其三种艺术与第三种格局类似,用requestAnimationFrame来替代setTimeout,相应的退换了if条件里的js。
requestAnimationFrame其实也就跟setTimeout/setInterval差不离,通过递归调用同一方法来不断更新画面以高达动起来的效果,但它优于setTimeout/setInterval的地点在于它是由浏览器特地为动画提供的API,在运维时浏览器会活动优化措施的调用,何况只要页面不是激活状态下的话,动画会自动行车制动器踏板,有效节约了CPU开销。

js代码如下

JavaScript

var box = $('#box'); $('button').on('click', function () { if (box.hasClass('hidden')) { box.removeClass('hidden'); requestAnimationFrame(function(){ box.removeClass('visuallyhidden'); }); } else { box.addClass('visuallyhidden'); box.one('transitionend', function(e) { box.addClass('hidden'); }); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var box = $('#box');
$('button').on('click', function () {
    if (box.hasClass('hidden')) {
        box.removeClass('hidden');
        requestAnimationFrame(function(){
            box.removeClass('visuallyhidden');
        });
    } else {
        box.addClass('visuallyhidden');
        box.one('transitionend', function(e) {
            box.addClass('hidden');
        });
    }
});

上述便是当transition遇上display时碰到的坑。

1 赞 5 收藏 5 评论

必威 2

引入内容

动画有个很好的用途,它能够让访客知道您的网址内容在几时爆发了改换。当增多或删除内容而尚未别的动画举办对接时,内容的猛然改动会让客户认为疑惑。而通过丰盛细微的卡通就会防止这种情状发生,何况有利于“公布”有东西就要离开或引入页面。

以下是二个经过添加或删除操作来保管列表内容的例子。大好多卡通能用来另外项指标内容。假设你发掘它们是卓有成效的,或有另外主张想增添进去,那么请 关联大家,大家很情愿听听你的主见。

 

一、过渡动画

过渡(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属性。
若果想要同一时候对接多少个属性,能够用逗号隔离。

必威 3

标准化显得 (使用 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。因为我们到现在还没利用动画片,所以列表项目会直接出现在页面,像下边那样。当然你也得以点击列表项目,让它们未有。

必威 4

(可在原来的文章查看效果)

复制代码

第二步:退换成分的图景。

为目的成分增添伪类或抬高注明了最终状态的类。
采纳 transtion 属性只是分明了要怎么着去过渡,要想让动画爆发,还得要有成分状态的变动。如何转移元素状态呢,当然便是在css中给那一个因素定义三个类(:hover等伪类也能够),这几个类描述的是连接动画截止时成分的动静。

除开利用hover等系列提供的伪类外,大家也足以轻巧的概念自身的类,然后想要过渡时就通过js把类加到成分下面。

注意:单纯的代码不会触发任何过渡操作,需求通过顾客的表现(如点击,悬浮等)触发。可触及的方法有::hover :focus :checked 媒体询问触发 JavaScript触发。

示例1:

必威 5

示例2:
当鼠标悬停在img元素上时,退换img成分的尺码。更动的方方面面经过是一马平川对接的,不是高速、突兀的。

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

动态组件

淡入淡出

作为第一个卡通,大家将会增加几个回顾的淡入淡出效果。相对此前的类型列表,该列表项目多了渐变效果。尽管在视觉上看起来依旧有少数笨重,但这有助于让浏览者有更加长的时间去留心有东西正在转换。

必威 6

(可在原来的作品查看效果)

因为要在已开立 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只好定义初叶情形和了结状态,不可能定义中间状态,也等于说唯有七个状态。

零件根节点

滑下&淡入淡出

历次增添或删除八个类别列表都会很忽然,那致使了不协调的效果与利益。那就让大家经过调治中度来创制一个更为通畅的滑行效果。

必威 7

(可在原来的书文查看效果)

此处与地点类名 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 轴)。

必威 8

(可在原版的书文查看效果)

为了设置那几个职能,须求定义贰个 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>

侧边旋转

于今大家要是稍稍调治这些效果,就可以丰硕轻松地开创差别的安插性。上面那些事例,是让项目列表在左侧旋转。

必威 9

(可在原作查看效果)

要成立这几个效果,大家只需更动旋转轴。

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动画中的帧来声澳优(Ausnutria Hyproca)个动画片。

最主要帧动画的定义格局也正如新鲜,它利用了二个主要字 @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>

打赏援救本人翻译越多好小说,多谢!

任选一种支付办法

必威 10 必威 11

赞 收藏 1 评论

  "license": "MIT",

连通动画与首要帧动画的分别

animation属性类似于transition,他们都以随着岁月改动而改动成分的属性值,其关键不一致在于:transition须求接触一个风云才会随着岁月转移其CSS属性;animation在无需接触任何事件的图景下,也足以显式的随时间变化来改形成分CSS属性,达到一种动画的意义。

    transition>

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

必威 12

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

必威 13

  "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是各样要拓宽动画的成分都须要求丰裕的类。

必威 14

你也可以在动画达成后,把动画类移除,以便能够另行举办同二个卡通。

必威 15

有关动画的配备参数,举例卡通持续时间,动画的施行次数等等,你能够在您的的成分上活动定义,覆盖掉animate.min.css里面所定义的就行了。注意增多浏览器前缀。

必威 16

参照他事他说加以考察资料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(组件和动画片)

本文由必威发布于必威-前端,转载请注明出处:相对于js动画来说用起来更快速简单,install即可

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。