vue进入/离开 & 列表过渡

vue进入/离开 & 列表过渡

给列表项目拉长动画

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

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

当网页某部分产生变动时,添加一些动画片有利于让用户知道爆发了哪些业务。因为动画能预先报告新内容的到达,大概让用户知道音信被移除。在那篇文章里,将会看出哪些利用动画扶助新情节的推荐介绍,例如突显或隐藏列表里的档次。

图片 1

(可在原作查看效果)

Dependencies(依赖的js库):

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

vue进入/离开 &
列表过渡

Vue 在插入、更新也许移除 DOM 时,提供各样区别格局的采用接入效果。

席卷以下工具:

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

能够相配使用第2方 CSS 动画库,如 Animate.css

在对接钩子函数中应用 JavaScript 间接操作 DOM

能够兼容使用第2方 JavaScript 动画库,如 Velocity.js

推荐介绍内容

动画片有个很好的用途,它亦可让来访的客人知道您的网址内容在何时发生了变动。当添加或删除内容而从不此外动画实行过渡时,内容的赫然改变会让用户觉得思疑。而因此添加细微的动画片就能制止那种境况爆发,并且有助于“宣布”有东西就要离开或引入页面。

以下是1个由此抬高或删除操作来管理列表内容的例证。大部分动画能用于另外门类的内容。要是您发觉它们是有效的,或有其余想法想添加进去,那么请 关联我们,大家很乐于听听你的想法。

 

一、过渡动画

过渡(transition)动画,就是从起初状态过渡到利落状态其1进度中所发生的动画。
所谓的情形便是指大小、地点、颜色、变形(transform)等等那几个属性。

Note:不是有着属性都能接通,唯有属性具有1个个中式点心值才具备过渡效果。
点击查看全体列表。

css过渡只好定义首和尾七个情景,所以是最简易的1种动画。
注释:Internet Explorer 玖 以及更早版本的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 代码

为了兑现演示里的动画片,将会编写1些 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))。
  • ease(默许值)规定慢速伊始,然后变快,然后慢速截至的对接效果(cubic-bezier(0.25,0.一,0.2五,一))。
  • ease-in 规定以慢速开头的接入效果(等于 cubic-bezier(0.42,0,1,壹))。
  • ease-out 规定以慢速甘休的衔接效果(等于 cubic-bezier(0,0,0.58,一))。
  • ease-in-out 规定以慢速开首和了结的连结效果(等于
    cubic-bezier(0.42,0,0.5八,1))。
  • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义本身的值。恐怕的值是
    0 至 一 以内的数值。
  • 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中给那几个因素定义1个类(: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;
}

动态组件

淡入淡出

用作第3个卡通,我们将会添加三个总结的淡入淡出效果。相对此前的项目列表,该列表项目多了渐变效果。纵然在视觉上看起来照旧有有个别笨重,但那有利于让浏览者有越来越长的年华去留意有东西正在变化。

图片 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是三遍性的,不能够重复发生,除非一再触发。
(三)transition只可以定义开首情状和终止状态,不可能定义中间状态,也正是说唯有四个情景。

组件根节点

滑下&淡入淡出

老是添加或删除四个种类列表都会很突兀,那导致了不协调的功用。那就让大家透过调整中度来创立多个越来越流畅的滑行效果。

图片 1

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

此处与地方类名 fade 唯1差别的是 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 玖 以及更早的IE版本不援助 animation 属性。

<div id=”demo”>

旋转进来

除了淡入淡出和滑动作效果果,还能更进一步地拉长一些 3D 效果。浏览器不止能在 X
或 Y 轴上变换到分,还存有深度的场馆( Z 轴)。

图片 1

(可在原作查看效果)

为了设置这几个职能,供给定义2个 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动画中的帧来申明一(Wissu)个动画片。

关键帧动画的定义格局也正如独特,它采纳了3个人命关天字 @keyframes
来定义动画。具体格式为:

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

诚如的话,0%和百分之百那四个关键帧是供给求定义的。0%得以由from代替,百分百得以由to代替。

    <transition name=”fade”>

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

为了可读性,上面那多少个代码都未有包蕴别的前缀。在那边,笔者强烈推荐添加前缀,以支持那个需求
-webkit
或别的前缀的浏览器。而笔者动用了 Autoprefixer 来消除这些标题。

正因为那个动画片都是在主导的 show/hide
上创设的,所以它们在不支持那么些动画片的浏览器上优雅地回退。在5光10色的装备和浏览器上拓展测试是至关首要的,但多数现代浏览器都能支撑那么些动画片。

打赏帮助本身翻译越多好小说,多谢!

打赏译者

  “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,动画播放为偶数1伍次则向前播放,如若为基数词就反方向播放。
  • animation-state:默认为running,播放,paused,暂停。
  • animation-fill-mode:定义动画起首在此之前和停止今后发生的操作。
  • none(暗中认可值),动画甘休时回来动画没起来时的图景;
  • forwards,动画甘休后继续利用最后关键帧的地方,即保存在结束状态;
  • backwards,让动画回到第3帧的状态;
  • 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 

第5步:遵照实际必要修改animate-config.json文件
诸如:大家只须要那多少个卡通效果:bounceIn和bounceOut。

{
    "bouncing_entrances": [
        "bounceIn"
    ],
    "bouncing_exits": [
        "bounceOut"
    ]
}

最终一步:进入animate.css项目下,运营gulp任务:gulp
default,生成新的animate.min.css覆盖私下认可的animate.min.css。

(二)你想要哪个成分进行动画,就给那些成分添加上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

二.对此那些在 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地图