图片 15

给列表项目增加动漫

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)动画,就是从最初状态过渡到截止状态以此进度中所发生的动漫。
所谓的情事就是指大小、地点、颜色、变形(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)卡塔 尔(英语:State of Qatar)。
  • 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。因为大家于今还未有利用动漫片,所以列表项目会一贯出今后页面,像下边那样。当然你也能够点击列表项目,让它们未有。

图片 1

(可在原作查看效果卡塔尔

复制代码

第二步:改动元素的情形。

为指标元素增多伪类或抬高注解了最终状态的类。
动用 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;
}

动态组件

淡入淡出

作为第二个卡通,大家将会增添一个简短的淡入淡出效果。相对在此以前的品类列表,该列表项目多了渐变效果。固然在视觉上看起来依然有几许笨重,但那有协助让浏览者有越来越长的岁月去注意有东西正在转换。

图片 1

(可在最先的文章查看效果卡塔尔国

因为要在已开立 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只可以定义开端景况和得了状态,无法定义中间状态,也正是说独有三个状态。

组件根节点

滑下&淡入淡出

老是增多或删除叁个品种列表都会很突兀,那招致了不调护医疗的信守。那就让我们经过调整中度来创设四个一发流畅的滑动作效果果。

图片 1

(可在最早的小说查看效果卡塔尔国

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

图片 1

(可在原版的书文查看效果卡塔 尔(英语:State of Qatar)

为了设置这么些功效,须要定义贰个 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>

左侧旋转

前些天我们只要稍微调度这么些职能,就能够特别轻易地创制差异的两全。上边那几个事例,是让项目列表在侧边旋转。

图片 1

(可在原来的书文查看效果卡塔尔国

要创制那些功能,大家只需改换旋转轴。

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动漫中的帧来声贝拉米(Bellamy卡塔尔个动漫。

重大帧动漫的概念形式也相比较新鲜,它选拔了二个根本字 @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卡塔 尔(英语:State of Qatar)。另一个值为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(橡皮筋卡塔 尔(英语:State of Qatar)、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’,

admin

相关文章

发表评论

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