xml地图|网站地图|网站标签 [设为首页] [加入收藏]
在京东网站前端监控平台的最佳实践,CSS动画学
分类:web前端

CSS动画学习指南:原理与实例

2015/09/25 · CSS · 1 评论 · 动画

本文由 伯乐在线 - 段昕理 翻译,唐尤华 校稿。未经许可,禁止转载!
英文出处:Tom Waterhouse。欢迎加入翻译组。

译者注:这篇文章比较古老了,大概成文于2011年。放在当今急速变化的web前端世界中似乎有些不合时宜。不过究其所写的内容-CSS动画的原理,则万变不离其宗,理解动画的基本原理非常重要,里面提到的12条基础动画原则,对创建高质量的动画效果有着极好的指导意义。当时支持CSS动画属性的浏览器很少,如今几乎所有主流浏览器基本都支持了(别跟我提IE哦)。文章中的代码示例和我们今天写的CSS3动画基本是一致,放在现在的浏览器跑也没有兼容性问题。

现如今 Firefox 和 基于Webkit引擎的浏览器都支持CSS动画了,择日不如撞日,何不尝试一下。抛去技术形态,不管是传统动画、电脑3D动画、Flash或CSS,遵循的动画原理都是相通的。

我们将在文章中初步了解CSS动画,并按照指导原则创建CSS动画。然后将通过实例,使用传统动画原理创建CSS动画。最后,展示一些真实世界里的用例。

图片 1

深入理解CSS中的层叠上下文和层叠顺序

2016/01/10 · CSS · 层叠上下文

原文出处: 张鑫旭   

零、世间的道理都是想通的

在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈。比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上。再比如说话语权,老婆的话永远是对的,领导的话永远是对的。

在CSS届,也是如此。只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等。但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了。例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的。那对于CSS世界中的元素而言,所谓的“冲突”指什么呢,其中,很重要的一个层面就是“层叠显示冲突”。

默认情况下,网页内容是没有偏移角的垂直视觉呈现,当内容发生层叠的时候,一定会有一个前后的层叠顺序产生,有点类似于真实世界中论资排辈的感觉。

而要理解网页中元素是如何“论资排辈”的,就需要深入理解CSS中的层叠上下文和层叠顺序。

我们大家可能都熟悉CSS中的z-index属性,需要跟大家讲的是,z-index实际上只是CSS层叠上下文和层叠顺序中的一叶小舟。

PhantomJS 和 NodeJS 在京东网站前端监控平台的最佳实践

2016/11/21 · JavaScript · NodeJS, phantomjs

本文作者: 伯乐在线 - keelii 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

CSS 动画属性

在深入之前,我们先写点基础的CSS:

Animation 是CSS的新属性,允许我们不需要借助Javascript或Flash就能为HTML元素(如:div、h1 和 span)创建动画。现在支持这个属性的浏览器有 包含Webkit 引擎的浏览器,如:Safari 4+、Safari for iOS (iOS 2+)、Chrome 1+和Firefox 5。 不支持该属性的浏览器则会忽略动画代码,此时要确保你的页面不完全依赖这个属性。

由于这个技术相对来说较新,需要添加浏览器厂商的前缀。到目前为止,每个浏览器的语法规则都是一样,只是用前缀区分。下面的代码例子中,我们用的是 -webkit 前缀语法。

要为元素添加动画,你只需要将CSS 动画关联到该元素就可以了:

CSS

/* This is the animation code. */ @-webkit-keyframes example { from { transform: scale(2.0); } to { transform: scale(1.0); } } /* This is the element that we apply the animation to. */ div { -webkit-animation-name: example; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease; /* ease is the default */ -webkit-animation-delay: 1s; /* 0 is the default */ -webkit-animation-iteration-count: 2; /* 1 is the default */ -webkit-animation-direction: alternate; /* normal is the default */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* This is the animation code. */
@-webkit-keyframes example {
   from { transform: scale(2.0); }
   to   { transform: scale(1.0); }
}
 
/* This is the element that we apply the animation to. */
div {
   -webkit-animation-name: example;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease; /* ease is the default */
   -webkit-animation-delay: 1s;             /* 0 is the default */
   -webkit-animation-iteration-count: 2;    /* 1 is the default */
   -webkit-animation-direction: alternate;  /* normal is the default */
}

首先,我们创建动画代码。这段代码可以出现在CSS文件中的任何位置,只要元素能找到相应动画的名字(animation-name)就可以了。

还有一种更简便的方法为元素添加动画:

CSS

div { -webkit-animation: example 1s ease 1s 2 alternate; }

1
2
3
div {
-webkit-animation: example 1s ease 1s 2 alternate;
}

这段代码做了一定简化,并没有把所有属性值都写上。如果某些值没有写,浏览器会回退使用默认值。

这些是最基础的。下面我们将展示更多的代码。

一、什么是层叠上下文

层叠上下文,英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文,我们可以理解为这个元素在z轴上就“高人一等”。

这里出现了一个名词-z轴,指的是什么呢?

表示的是用户与屏幕的这条看不见的垂直线(参见下图示意-红线):
图片 2

层叠上下文是一个概念,跟「块状格式化上下文(BFC)」类似。然而,概念这个东西是比较虚比较抽象的,要想轻松理解,我们需要将其具象化。

怎么个具象化法呢?

你可以把「层叠上下文」理解为当官:网页中有很多很多的元素,我们可以看成是真实世界的芸芸众生。真实世界里,我们大多数人是普通老百姓们,还有一部分人是做官的官员。OK,这里的“官员”就可以理解为网页中的层叠上下文元素。

换句话说,页面中的元素有了层叠上下文,就好比我们普通老百姓当了官,一旦当了官,相比普通老百姓而言,离皇帝更近了,对不对,就等同于网页中元素级别更高,离我们用户更近了。

图片 3

为什么需要一个前端监控系统

通常在一个大型的 Web 项目中有很多监控,比如后端的服务 API 监控,接口存活、调用、延迟等监控,这些一般都用来监控后台接口数据层面的信息。而且对于大型网站系统来说,从后端服务到前台展示会有很多层:内网 VIP、CDN 等。但是这些监控并不能准确地反应用户看到的前端页面状态,比如:页面第三方系统数据调用失败,模块加载异常,数据不正确,空白开天窗等。这时候就需要从前端 DOM 展示的角度去分析和收集用户真正看到的东西,从而检测出页面是否出现异常问题

使用传统动画原理

在我看来,传统动画的鼻祖迪斯尼,早期在著名的图书《Illusion of Life》里创立了传统动画的12条原则。这些基础原则可以应用到所有类型动画,不过你并不需要像动画专家一样遵循。我们将这12条原则运用到CSS动画实例上,把一个基础动画转变成更加可信的视觉幻象。

虽然只是蹦蹦跳跳的小球,但你可以看出两个版本中的不同世界。

这个例子展示了CSS动画特性。下面的代码中,我们用一些空div元素来展示如何运作;我们都知道这代码不够语义化,但重点在于它将页面变得生动起来,这在以前的浏览器中是绝对做不到的。

二、什么是层叠水平

再来说说层叠水平。“层叠水平”英文称作”stacking level”,决定了同一个层叠上下文中元素在z轴上的显示顺序。level这个词很容易让我们联想到我们真正世界中的三六九等、论资排辈。真实世界中,每个人都是独立的个体,包括同卵双胞胎,有差异就有区分。例如,双胞胎虽然长得像Ctrl+C/Ctrl+V得到的,但实际上,出生时间还是有先后顺序的,先出生的那个就大,大哥或大姐。网页中的元素也是如此,页面中的每个元素都是独立的个体,他们一定是会有一个类似的排名排序的情况存在。而这个排名排序、论资排辈就是我们这里所说的“层叠水平”。层叠上下文元素的层叠水平可以理解为官员的职级,1品2品,县长省长之类;对于普通元素,这个嘛……你自己随意理解。

于是,显而易见,所有的元素都有层叠水平,包括层叠上下文元素,层叠上下文元素的层叠水平可以理解为官员的职级,1品2品,县长省长之类。然后,对于普通元素的层叠水平,我们的探讨仅仅局限在当前层叠上下文元素中。为什么呢?因为否则没有意义。

这么理解吧~ 上面提过元素具有层叠上下文好比当官,大家都知道的,这当官的家里都有丫鬟啊保镖啊管家啊什么的。所谓打狗看主人,A官员家里的管家和B官员家里的管家做PK实际上是没有意义的,因为他们牛不牛逼完全由他们的主子决定的。一人得道鸡犬升天,你说这和珅家里的管家和七侠镇娄知县县令家里的管家有可比性吗?李总理的秘书是不是分分钟灭了你村支部书记的秘书(如果有)。

翻译成术语就是:普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。

图片 4

需要注意的是,诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没错,某些情况下z-index确实可以影响层叠水平,但是,只限于定位元素以及flex盒子的孩子元素;而层叠水平所有的元素都存在。

需要监控系统解决的问题

页面通常出现以下问题时需要使用邮件、短信通知相关人员修复问题

  • 状态码返回错误(50x, 40x)无法打开
  • 模块加载失败
  • 页面乱码
  • 数据正确性

触发报警时要有现场快照,以便复现问题

挤压和拉伸

图片 5

这个弹跳球为压扁和拉伸做了很好的展示。如果弹球高速下落并撞击地面,你可以观察到它被挤扁然后在弹回的过程中被拉伸。

在基本常识层面,这个例子让我们的动画有了重量和伸缩的感觉。如果扔一个保龄球,我们不会期待它有任何拉伸,很可能只是会撞坏地面。

可以通过CSS3的属性 transform 来产生压扁和拉伸的效果。

CSS

@-webkit-keyframes example { 0% { -webkit-transform: scaleY(1.0); } 50% { -webkit-transform: scaleY(1.2); } 100% { -webkit-transform: scaleY(1.0); } }

1
2
3
4
5
@-webkit-keyframes example {
   0% { -webkit-transform: scaleY(1.0); }
   50% { -webkit-transform: scaleY(1.2); }
   100% { -webkit-transform: scaleY(1.0); }
}

这段代码会将物体纵向(y轴,上下)的比例改变为原始比例的1.2倍,然后回复到原始尺寸。

我们还为这个动画使用了稍微复杂一点的定时器。对于基础动画只需要起始(from)和结束(to)就可以了。但你也可以通过白分比的方式为每个时间点设置动画,就像代码所展示的那样。

挤压效果已经实现了。现在我们利用转换(translate)来移动物体。我们可以它将形变放在一起。

CSS

50% { -webkit-transform: translateY(-300px) scaleY(1.2); }

1
2
3
50% {
-webkit-transform: translateY(-300px) scaleY(1.2);
}

转换属性允许我们在不改变基础属性(如 位置、宽度、高度)的前提下操作物体,这就使其非常适合CSS动画。这个特别的转换属性让小球在动画的中间点从地面弹起。

(请注意:要查看这个动画,你需要最新版的Firefox、Chrome或Safari。笔者书写这段文字的时候,Safari浏览器提供了最佳视觉体验。)

(译者注:现如今主流的浏览器都已经能很好的实现动画效果了)

查看挤压和拉伸的效果.

没错,小球看起来还是很糙,不过这个小小的调整是让动画变得逼真的第一步。

三、什么是层叠顺序

再来说说层叠顺序。“层叠顺序”英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序,注意,这里跟上面两个不一样,上面的层叠上下文和层叠水平是概念,而这里的层叠顺序是规则

在CSS2.1的年代,在CSS3还没有出现的时候(注意这里的前提),层叠顺序规则遵循下面这张图:
图片 6

有人可能有见过类似图,那个图是很多很多年前老外绘制的,英文内容。而是更关键的是国内估计没有同行进行过验证与实践,实际上很多关键信息缺失。上面是我自己手动重绘的中文版同时补充很多其他地方绝对没有的重要知识信息。如果想要无水印高清大图,点击这里购买(0.5元)。

缺失的关键信息包括:

  1. 位于最低水平的border/background指的是层叠上下文元素的边框和背景色。每一个层叠顺序规则适用于一个完整的层叠上下文元素。
  2. 原图没有呈现inline-block的层叠顺序,实际上,inline-block和inline水平元素是同等level级别。
  3. z-index:0实际上和z-index:auto单纯从层叠水平上看,是可以看成是一样的。注意这里的措辞——“单纯从层叠水平上看”,实际上,两者在层叠上下文领域有着根本性的差异。

下面我要向大家发问了,大家有没有想过,为什么内联元素的层叠顺序要比浮动元素和块状元素都高?
图片 7

为什么呢?我明明感觉浮动元素和块状元素要更屌一点啊。

嘿嘿嘿,我就不卖关子了,直接看下图的标注说明:
图片 8

诸如border/background一般为装饰属性,而浮动和块状元素一般用作布局,而内联元素都是内容。网页中最重要的是什么?当然是内容了哈,对不对!

因此,一定要让内容的层叠顺序相当高,当发生层叠是很好,重要的文字啊图片内容可以优先暴露在屏幕上。例如,文字和浮动图片重叠的时候:

图片 9

上面说的这些层叠顺序规则还是老时代的,如果把CSS3也牵扯进来,科科,事情就不一样了。

技术选型

监控的意义和回归测试的在本质上是一致的,都是对已上线功能进行回归测试,但不同的是监控需要做长期的可持续可循环的回归测试,而测试仅仅需要在上线之后做一次回归

既然监控和测试的本质一致,那我们完全可以采用测试的方式来做监控系统。在自动化测试技术遍地开花的时代,不乏很多好用的自动化工具,我们只需要把这些自动化工具进行整合为我们所用即可

  • NodeJS – 特别适用于网络密集型任务
  • PhantomJS – 模拟无界面的浏览器,提供丰富的内核交互 API

预备

预备在主要动作发生之前增加了悬念或力量感。举个例子,在你起跳之前腿部的弯曲有助于观察者预判你下一步会做什么。在我们的弹球例子中,事前增加一个简单的影子表示有东西将要从上面掉下。

查看预备效果.

我们添加了另一个 div 元素代表影子,这样我们可以单独的为其设置动画。

要在这里增加预期,我们需要让小球快速掉入场景中。通过适配各百分比的时间点来实现,小球在开始点和第一个动作之间没有移动。

CSS

@-webkit-keyframes example { 0% { -webkit-transform: translateY(-300px) scaleY(1.2); } 35% { -webkit-transform: translateY(-300px) scaleY(1.2); } /* Same position as 0% */ 65% { -webkit-transform: translateY(0px) scaleY(1.2); } /* Starts moving after 35% to this position */ 67% { -webkit-transform: translateY(10px) scaleY(0.8); } 85% { -webkit-transform: translateY(-100px) scaleY(1.2); } 100% { -webkit-transform: translateY(0px); } }

1
2
3
4
5
6
7
8
@-webkit-keyframes example {
   0% { -webkit-transform: translateY(-300px) scaleY(1.2); }
   35% { -webkit-transform: translateY(-300px) scaleY(1.2); } /* Same position as 0% */
   65% { -webkit-transform: translateY(0px) scaleY(1.2); }    /* Starts moving after 35% to this position */
   67% { -webkit-transform: translateY(10px) scaleY(0.8); }
   85% { -webkit-transform: translateY(-100px) scaleY(1.2); }
   100% { -webkit-transform: translateY(0px); }
}

在动画的35%的时间点前,小球在场景中的位置没有发生变化,没有移动。然后在 35% 到 65%,小球忽然出现在舞台上,剩下的动画紧接着跟上。

也可以使用动画延迟(animation-delay)来实现预备:

CSS

div { -webkit-animation-delay: 1s; }

1
2
3
div {
-webkit-animation-delay: 1s;
}

四、务必牢记的层叠准则

下面这两个是层叠领域的黄金准则。当元素发生层叠的时候,其覆盖关系遵循下面2个准则:

  1. 谁大谁上:当具有明显的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
  2. 后来居上:当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。

在CSS和HTML领域,只要元素发生了重叠,都离不开上面这两个黄金准则。因为后面会有多个实例说明,这里就到此为止。

NodeJS

NodeJS 是一个 JavaScript 运行环境,非阻塞 I/O 和异步、事件驱动,这几点对于我们构建基于 DOM 元素的监控是非常重要的

舞台

图片 10

现在试试把舞台添加到场景中,将动画放入环境中。回顾一下迪士尼的电影,如果去掉了奇妙的背景会变成什么样?这是魔法的半壁江山。

舞台也是吸引注意的关键元素。与剧院的舞台一样,光线总是照射到最重要的区域。舞台应该加入到视野中。除了弹球,我为弹球的降落添加了一个简单的背景。这样看客就知道舞台的中央会出现动画,场景也就可以从一片大白雪(白色区域)中脱颖而出了。

五、层叠上下文的特性

层叠上下文元素有如下特性:

  • 层叠上下文的层叠水平要比普通元素高(原因后面会说明);
  • 层叠上下文可以阻断元素的混合模式(见此文第二部分说明);
  • 层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
  • 每个层叠上下文和兄弟元素独立,也就是当进行层叠变化或渲染的时候,只需要考虑后代元素。
  • 每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。

翻译成真实世界语言就是:

  • 当官的比老百姓更有机会面见圣上;
  • 领导下去考察,会被当地官员阻隔只看到繁荣看不到真实民情;
  • 一个家里,爸爸可以当官,孩子也是可以同时当官的。但是,孩子这个官要受爸爸控制。
  • 自己当官,兄弟不占光。有什么福利或者变故只会影响自己的孩子们。
  • 每个当官的都有属于自己的小团体,当家眷管家发生摩擦磕碰的时候(包括和其他官员的家眷管家),都是要优先看当官的也就是主子的脸色。

PhantomJS

PhantomJS 是一个基于 webkit 的浏览器引擎,可以使用 JavaScript API 来模拟浏览器的操作。它使用 QtWebKit 作为它的浏览器核心,使用 webkit 来编译解释执行 JavaScript 代码。也就是说任何你可以在 webkit 浏览器里做的事情,它都能做到

它不仅是个隐形的浏览器,提供了诸如 CSS 选择器、支持 Web 标准、DOM 操作、JSON、HTML5、Canvas、SVG 等,同时也提供了处理文件 I/O 的操作等。PhantomJS 的用处可谓非常广泛,诸如网络监测、网页截屏、无浏览器的 Web 测试、页面访问自动化等

为什么不是 Selenium

做自动化测试的同学肯定都知道 Selenium。可以使用 Selenium 将测试用例在浏览器中执行,而且 Selenium 对各种平台和常见浏览器支持比较好,但是 Selenium 上手难度系数略高,而且使用Selenium 需要在服务器端安装浏览器

考虑到监控主要任务在监控不在测试。系统并不需要太多考虑兼容性,而且监控功能相对单一,主要对页面进行功能上的回归测试,所以选择了 PhantomJS

逐帧 VS 状态到状态

在传统动画中,可以选择如何构成自己的动画。逐帧意味着需要画出序列的每一帧。状态到状态意味着创建序列的少数关键帧,然后填充中间的间隔。填充间隔在被称作渐变(“in-betweening”或“tweening”),这是制作Flash动画的术语。

在CSS动画中,我们通常使用第二种方式,状态到状态。就是说,我们将为动作添加关键帧,之后浏览器将会自动在这些关键帧直接做渐变平滑处理。当然,我们同样也能向逐帧技术学习。浏览器只提供有限的动画效果;有时候,你为达到某种的效果时,必须采用更困难的方式为多种动画做拼接。

六、层叠上下文的创建

卖了这么多文字,到底层叠上下文是个什么鬼,倒是拿出来瞅瞅啊!

哈哈。如同块状格式化上下文,层叠上下文也基本上是有一些特定的CSS属性创建的。我将其总结为3个流派,也就是做官的3种途径:

  1. 皇亲国戚派:页面根元素天生具有层叠上下文,称之为“根层叠上下文”。
  2. 科考入选派:z-index值为数值的定位元素的传统层叠上下文。
  3. 其他当官途径:其他CSS3属性。

//zxx: 下面很多例子是实时CSS效果,建议您去原地址浏览,以便预览更准确的效果。

①. 根层叠上下文

指的是页面根元素,也就是滚动条的默认的始作俑者<html>`元素。这就是为什么,绝对定位元素在left/top`等值定位的时候,如果没有其他定位元素限制,会相对浏览器窗口定位的原因。

②. 定位元素与传统层叠上下文

对于包含有position:relative/position:absolute的定位元素,以及FireFox/IE浏览器(不包括Chrome等webkit内核浏览器)(目前,也就是2016年初是这样)下含有position:fixed声明的定位元素,当其z-index值不是auto的时候,会创建层叠上下文。

知道了这一点,有些现象就好理解了。

如下HTML代码:

<div style="position:relative; z-index:auto;"> <img src="mm1.jpg" style="position:absolute; z-index:2;"> <-- 横妹子 --> </div> <div style="position:relative; z-index:auto;"> <img src="mm2.jpg" style="position:relative; z-index:1;"> <-- 竖妹子 --> </div>

1
2
3
4
5
6
<div style="position:relative; z-index:auto;">
    <img src="mm1.jpg" style="position:absolute; z-index:2;">    <-- 横妹子 -->
</div>
<div style="position:relative; z-index:auto;">
    <img src="mm2.jpg" style="position:relative; z-index:1;">    <-- 竖妹子 -->
</div>

图片 11

大家会发现,竖着的妹子(mm2)被横着的妹子(mm1)给覆盖了。

下面,我们对父级简单调整下,把z-index:auto改成层叠水平一致的z-index:0, 代码如下:

<div style="position:relative; z-index:0;"> <img src="mm1.jpg" style="position:absolute; z-index:2;"> <-- 横妹子 --> </div> <div style="position:relative; z-index:0;"> <img src="mm2.jpg" style="position:relative; z-index:1;"> <-- 竖妹子 --> </div>

1
2
3
4
5
6
<div style="position:relative; z-index:0;">
    <img src="mm1.jpg" style="position:absolute; z-index:2;">    <-- 横妹子 -->
</div>
<div style="position:relative; z-index:0;">
    <img src="mm2.jpg" style="position:relative; z-index:1;">    <-- 竖妹子 -->
</div>

图片 12

大家会发现,尼玛反过来了,竖着的妹子(mm2)这回趴在了横着的妹子(mm1)身上。

图片 13

为什么小小的改变会有想法的结果呢?
图片 14

差别就在于,z-index:0所在的<div>元素是层叠上下文元素,而z-index:auto所在的<div>元素是一个普通的元素,于是,里面的两个<img>妹子的层叠比较就不受父级的影响,两者直接套用层叠黄金准则,这里,两者有着明显不一的z-index值,因此,遵循“谁大谁上”的准则,于是,z-index2的那个横妹子,就趴在了z-index1的竖妹子身上。

z-index一旦变成数值,哪怕是0,都会创建一个层叠上下文。此时,层叠规则就发生了变化。层叠上下文的特性里面最后一条——自成体系。两个<img>妹子的层叠顺序比较变成了优先比较其父级层叠上下文元素的层叠顺序。这里,由于两者都是z-index:0,层叠顺序这一块两者一样大,此时,遵循层叠黄金准则的另外一个准则“后来居上”,根据在DOM流中的位置决定谁在上面,于是,位于后面的竖着的妹子就自然而然趴在了横着的妹子身上。对,没错,<img>元素上的z-index打酱油了!

有时候,我们在网页重构的时候,会发现,z-index嵌套错乱,看看是不是受父级的层叠上下文元素干扰了。然后,可能没多大意义了,但我还是提一下,算是祭奠下,IE6/IE7浏览器有个bug,就是z-index:auto的定位元素也会创建层叠上下文。这就是为什么在过去,IE6/IE7的z-index会搞死人的原因。

然后,我再提一下position:fixed, 在过去,position:fixedrelative/absolute在层叠上下文这一块是一路货色,都是需要z-index为数值才行。但是,不知道什么时候起,Chrome等webkit内核浏览器,position:fixed元素天然层叠上下文元素,无需z-index为数值。根据我的测试,目前,IE以及FireFox仍是老套路。

③. CSS3与新时代的层叠上下文
CSS3的出现除了带来了新属性,同时还对过去的很多规则发出了挑战。例如,CSS3 transform对overflow隐藏对position:fixed定位的影响等。而这里,层叠上下文这一块的影响要更加广泛与显著。

如下:

  1. z-index值不为autoflex项(父元素display:flex|inline-flex).
  2. 元素的opacity值不是1.
  3. 元素的transform值不是none.
  4. 元素mix-blend-mode值不是normal.
  5. 元素的filter值不是none.
  6. 元素的isolation值是isolate.
  7. will-change指定的属性值为上面任意一个。
  8. 元素的-webkit-overflow-scrolling设为touch.

基本上每一项都有很多槽点。

1. display:flex|inline-flex与层叠上下文
注意,这里的规则有些负责。要满足两个条件才能形成层叠上下文:条件1是父级需要是display:flex或者display:inline-flex水平,条件2是子元素的z-index不是auto,必须是数值。此时,这个子元素为层叠上下文元素,没错,注意了,是子元素,不是flex父级元素。

眼见为实,给大家上例子吧。

如下HTML和CSS代码:

<div class="box"> <div> <img src="mm1.jpg"> </div> </div>

1
2
3
4
5
<div class="box">
    <div>
     <img src="mm1.jpg">
    </div>
</div>

.box { } .box > div { background-color: blue; z-index: 1; } /* 此时该div是普通元素,z-index无效 */ .box > div > img { position: relative; z-index: -1; right: -150px; /* 注意这里是负值z-index */ }

1
2
3
4
5
.box {  }
.box > div { background-color: blue; z-index: 1; }    /* 此时该div是普通元素,z-index无效 */
.box > div > img {
  position: relative; z-index: -1; right: -150px;     /* 注意这里是负值z-index */
}

结果如下:

图片 15

会发现,妹子跑到蓝色背景的下面了。为什么呢?层叠顺序图可以找到答案,如下:
图片 16

从上图可以看出负值z-index的层叠顺序在block水平元素的下面,而蓝色背景div元素是个普通元素,因此,妹子直接穿越过去,在蓝色背景后面的显示了。

现在,我们CSS微调下,增加display:flex, 如下:

.box { display: flex; } .box > div { background-color: blue; z-index: 1; } /* 此时该div是层叠上下文元素,同时z-index生效 */ .box > div > img { position: relative; z-index: -1; right: -150px; /* 注意这里是负值z-index */ }

1
2
3
4
5
.box { display: flex; }
.box > div { background-color: blue; z-index: 1; }    /* 此时该div是层叠上下文元素,同时z-index生效 */
.box > div > img {
  position: relative; z-index: -1; right: -150px;     /* 注意这里是负值z-index */
}

结果:

图片 17

会发现,妹子在蓝色背景上面显示了,为什么呢?层叠顺序图可以找到答案,如下:
图片 18
从上图可以看出负值z-index的层叠顺序在当前第一个父层叠上下文元素的上面,而此时,那个z-index值为1的蓝色背景`` 

的父元素的display值是flex,一下子升官发财变成层叠上下文元素了,于是,图片在蓝色背景上面显示了。这个现象也证实了层叠上下文元素是flex子元素,而不是flex容器元素。

另外,另外,这个例子也颠覆了我们传统的对z-index的理解。在CSS2.1时代,z-index属性必须和定位元素一起使用才有作用,但是,在CSS3的世界里,非定位元素也能和z-index愉快地搞基。

2. opacity与层叠上下文

我们直接看代码,原理和上面例子一样,就不解释了。

如下HTML和CSS代码:

<div class="box"> <img src="mm1.jpg"> </div>

1
2
3
<div class="box">
    <img src="mm1.jpg">
</div>

.box { background-color: blue; } .box > img { position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue;  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

图片 19

然后价格透明度,例如50%透明:

.box { background-color: blue; opacity: 0.5; } .box > img { position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue; opacity: 0.5;  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

图片 20

原因就是半透明元素具有层叠上下文,妹子图片的z-index:-1无法穿透,于是,在蓝色背景上面乖乖显示了。

3. transform与层叠上下文

应用了transform变换的元素同样具有菜单上下文。

我们直接看应用后的结果,如下CSS代码:

.box { background-color: blue; transform: rotate(15deg); } .box > img { position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue; transform: rotate(15deg);  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

图片 21

4. mix-blend-mode与层叠上下文
mix-blend-mode类似于PS中的混合模式,之前专门有文章介绍-“CSS3混合模式mix-blend-mode简介”。

元素和白色背景混合。无论哪种模式,要么全白,要么没有任何变化。为了让大家有直观感受,因此,下面例子我特意加了个原创平铺背景:

.box { background-color: blue; mix-blend-mode: darken; } .box > img { position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue; mix-blend-mode: darken;  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

图片 22

需要注意的是,目前,IE浏览器(包括IE14)还不支持mix-blend-mode,因此,要想看到妹子在背景色之上,请使用Chrome或FireFox。

同样的,因为蓝色背景元素升级成了层叠上下文,因此,z-index:-1无法穿透,在蓝色背景上显示了。

5. filter与层叠上下文

此处说的filter是CSS3中规范的滤镜,不是旧IE时代私有的那些,虽然目的类似。同样的,我之前有提过,例如图片的灰度或者图片的毛玻璃效果等。

我们使用常见的模糊效果示意下:

.box { background-color: blue; filter: blur(5px); } .box > img { position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue; filter: blur(5px);  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

图片 23

好吧,果然被你猜对了,妹子蓝色床上躺着,只是你眼镜摘了,看得有些不够真切罢了。

6. isolation:isolate与层叠上下文
isolation:isolate这个声明是mix-blend-mode应运而生的。默认情况下,mix-blend-mode会混合z轴所有层叠在下面的元素,要是我们不希望某个层叠的元素参与混合怎么办呢?就是使用isolation:isolate。由于一言难尽,我特意为此写了篇文章:“理解CSS3 isolation: isolate的表现和作用”,解释了其阻隔混合模式的原理,建议大家看下。

要演示这个效果,我需要重新设计下,如下HTML结构:

<img src="img/mm2.jpg" class="mode"> <div class="box"> <img src="mm1.jpg"> </div>

1
2
3
4
<img src="img/mm2.jpg" class="mode">
<div class="box">
    <img src="mm1.jpg">
</div>

CSS主要代码如下:

.mode { /* 竖妹子绝对定位,同时混合模式 */ position: absolute; mix-blend-mode: darken; } .box { background: blue; } .box > img { position: relative; z-index: -1; }

1
2
3
4
5
6
7
8
9
10
.mode {
  /* 竖妹子绝对定位,同时混合模式 */
  position: absolute; mix-blend-mode: darken;
}    
.box {
  background: blue;        
}
.box > img {
  position: relative; z-index: -1;
}

结构如下:

图片 24

会发现,横妹子被混合模式了。此时,我们给妹子所在容器增加isolation:isolate,如下CSS所示:

.mode { /* 竖妹子绝对定位,同时混合模式 */ position: absolute; mix-blend-mode: darken; } .box { background: blue; isolation:isolate; } .box > img { position: relative; z-index: -1; }

1
2
3
4
5
6
7
8
9
10
.mode {
  /* 竖妹子绝对定位,同时混合模式 */
  position: absolute; mix-blend-mode: darken;
}    
.box {
  background: blue; isolation:isolate;        
}
.box > img {
  position: relative; z-index: -1;
}

结果为:

图片 25

会发现横着的妹子跑到蓝色背景上面了。这表明确实创建了层叠上下文。
7. will-change与层叠上下文

关于will-change,如果有同学还不了解,可以参见我之前写的文章:“使用CSS3 will-change提高页面滚动、动画等渲染性能”。

都是类似的演示代码:

.box { background-color: blue; will-change: transform; } .box > img { position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue; will-change: transform;  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

图片 26

果然不出所料,妹子上了蓝色的背景。

架构设计

惯性和重叠

和物理世界一样!惯性和重叠常用在人物的身体移动中,例如人物胳膊的摇摆或头发的下落。想象一个人顶着大肚腩快速的转身:他们的身体先转过来,然后肚腩迅速跟上。

对我们来说,这意味着当球掉落时需要使其符合物理定律。上面的例子中小球掉落很不自然,就跟没有受到重力的影响一样。我们希望小球掉落,然后弹起。不过得讲完下一原则才能实现。

七、层叠上下文与层叠顺序

本文多次提到,一旦普通元素具有了层叠上下文,其层叠顺序就会变高。那它的层叠顺序究竟在哪个位置呢?

这里需要分两种情况讨论:

  1. 如果层叠上下文元素不依赖z-index数值,则其层叠顺序是z-index:auto可看成z:index:0级别;
  2. 如果层叠上下文元素依赖z-index数值,则其层叠顺序由z-index值决定。

于是乎,我们上面提供的层叠顺序表,实际上还是缺少其他重要信息。我又花功夫重新绘制了一个更完整的7阶层叠顺序图(同样的版权所有,商业请购买,可得无水印大图):

图片 27

大家知道为什么定位元素会层叠在普通元素的上面吗?

其根本原因就在于,元素一旦成为定位元素,其z-index就会自动生效,此时其z-index就是默认的auto,也就是0级别,根据上面的层叠顺序表,就会覆盖inlineblockfloat元素。

而不支持z-index的层叠上下文元素天然z-index:auto级别,也就意味着,层叠上下文元素和定位元素是一个层叠顺序的,于是当他们发生层叠的时候,遵循的是“后来居上”准则。

我们可以速度测试下:

<img src="mm1" style="position:relative"/> <img src="mm2" style="transform:scale(1);"/>

1
2
<img src="mm1" style="position:relative"/>
<img src="mm2" style="transform:scale(1);"/>

<img src="mm2" style="transform:scale(1);"/> <img src="mm1" style="position:relative"/>

1
2
<img src="mm2" style="transform:scale(1);"/>
<img src="mm1" style="position:relative"/>

图片 28

会发现,两者样式一模一样,仅仅是在DOM流中的位置不一样,导致他们的层叠表现不一样,后面的妹子趴在了前面妹子的身上。这也说明了,层叠上下文元素的层叠顺序就是z-index:auto级别。

z-index值与层叠顺序

如果元素支持z-index值,则层叠顺序就要好理解些了,比较数值大小嘛,小盆友都会,本质上是应用的“谁大谁上”的准则。在以前,我们只需要关心定位元素的z-index就好,但是,在CSS3时代,flex子项也支持z-index,使得我们面对的情况比以前要负复杂。然而,好的是,规则都是一样的,对于z-index的使用和表现也是如此,套用上面的7阶层叠顺序表就可以了。

同样,举个简单例子,看下z-index:-1z-index:1变化对层叠表现的影响,如下两段HTML:

<div style="display:flex; background:blue;"> <img src="mm1.jpg" style="<mark>z-index:-1;</mark>"/></div>

1
2
<div style="display:flex; background:blue;">
   <img src="mm1.jpg" style="<mark>z-index:-1;</mark>"/></div>

<div style="display:flex; background:blue;"> <img src="mm1.jpg" style="<mark>z-index:1;</mark>"/></div>

1
2
<div style="display:flex; background:blue;">
   <img src="mm1.jpg" style="<mark>z-index:1;</mark>"/></div>

最后,会发现,z-index:-1跑到了背景色小面,而z-index:1高高在上。

图片 29

一个与层叠上下文相关的有趣的显示现象

在实际项目中,我们可能会渐进使用CSS3的fadeIn淡入animation效果增强体验,于是,我们可能就会遇到类似下面的现象:

您可以狠狠地点击这里:CSS3 fadeIn淡入animation动画有趣现象

有一个绝对定位的黑色半透明层覆盖在图片上,默认显示是这样的:
图片 30

但是,一旦图片开始走fadeIn淡出的CSS3动画,文字跑到图片后面去了图片 31
图片 32

为什么会这样?

实际上,学了本文的内容,就很简单了!fadeIn动画本质是opacity透明度的变化:

@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

1
2
3
4
5
6
7
8
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

要知道,opacity的值不是1的时候,是具有层叠上下文的,层叠顺序是z-index:auto级别,跟没有z-index值的absolute绝对定位元素是平起平坐的。而本demo中的文字元素在图片元素的前面,于是,当CSS3动画只要不是最终一瞬间的opacity: 1,位于DOM流后面的图片就会遵循“后来居上”准则,覆盖文字。

这就是原因,于是,我们想要解决这个问题就很简单。

  1. 调整DOM流的先后顺序;

  2. 提高文字的层叠顺序,例如,设置z-index:1;

架构概览

图片 33

慢进慢出

这是与加速或减速有关。想象一个超速的汽车需要停下来。如果它瞬间就停下来,肯定没人信。我们知道汽车需要时间来减速,所以要先让汽车刹车并缓慢停止。

还有一个和重力相关的效果。想象儿童荡秋千。当他们达到最高点时会减速,当返回到最低点时又会加速。最快的速度出现在弧面的底部。然后上升到相反的方向,如此反复。

图片 34

回到我们的例子,调整进和出的速度可以让小球的运动(最终)更加可信。

当球撞击地面,碰撞会使起迅速弹回。当抵达最高点,它会减速。这样看起来小球像是真正的掉落。

在 CSS 中,我们可以控制 animation-timing-function 属性:

CSS

-webkit-animation-timing-function: ease-out;

1
-webkit-animation-timing-function: ease-out;

这些属性包含以下这些值:

  • ease-in 开始时缓慢,然后加速。
  • ease-out 开始时快速,然后减速直到停止。
  • ease-in-out 开始缓慢,一直加速到中段,然后减速直到停止。
  • linear 一直保持匀速。

你还可以使用贝塞尔曲线来创建自定义的缓动速度。

查看慢进慢出效果

八、结束语

只要元素发生层叠,要解释其表现,基本上就本文的这些内容了。

我发现很多重构小伙伴都有z-index滥用,或者使用不规范的问题。我觉得最主要的原因还是对理解层叠上下文以及层叠顺序这些概念都不了解。例如,只要使用了定位元素,尤其absolute绝对定位,都离不开设置一个z-index值;或者只要元素被其他元素覆盖了,例如变成定位元素或者增加z-index值升级。页面一复杂,必然搞得乱七八糟。

实际上,在我看来,觉得多数常见,z-index根本就没有出现的必要。知道了内联元素的层叠水平比块状元素高,于是,某条线你想覆盖上去的时候,需要设置position:relative吗?不需要,inline-block化就可以。因为IE6/IE7 position:relative会创建层叠上下文,很烦的。

OK,本文已经够长了,就不多啰嗦了。

行为匆忙,出错在所难免,欢迎大力指正。也欢迎各种形式的交流,或者指出文中概念性的错误。

感谢阅读!

1 赞 7 收藏 评论

图片 35

架构简述

对于 DOM 监控服务,在应用层面上进行了垂直划分:

  • 规则管理系统
  • 规则队列生成器
  • 长时持续处理器
  • PhantomJS 服务
  • 服务化 API

在应用层面上进行的垂直划分可以对应用做分布式部署,提高处理能力。后期也方便做性能优化、系统改造扩展等

弧线

图片 36

与遵循物理定律类似,弧线遵循的基本原则叫做“上升的东西必然落下”。弧线在思考物体运动轨迹时非常有用。

这个动画用 CSS 来实现稍微繁琐一点。我们想让小球上下运动的同时往边上移动。所以,我们让小球从左边平滑进入的同时保持弹跳动画。与其把所有的动作都放到一个动画中,不如做两个独立的动画更简单。在这个例子里,我们将小球用另一个 div 元素包裹,然后单独添加动画。

HTML

XHTML

<div class="ball-arc"> <div class="ball"></div> </div>

1
2
3
<div class="ball-arc">
<div class="ball"></div>
</div>

CSS

JavaScript

.ball-arc { -webkit-animation: ball-x 2.5s cubic-bezier(0, 0, 0.35, 1); } /* cubic-bezier here is to adjust the animation-timing speed. This example makes the ball take longer to slow down. */ /* 这的贝塞尔曲线用作调整动画的速度。 这个例子使小球的减速时间更长了*/ @-webkit-keyframes ball-x { 0% { -webkit-transform: translateX(-275px); } 100% { -webkit-transform: translateX(0px); } }

1
2
3
4
5
6
7
8
9
10
11
.ball-arc {
-webkit-animation: ball-x 2.5s cubic-bezier(0, 0, 0.35, 1);
}
   /* cubic-bezier here is to adjust the animation-timing speed.
   This example makes the ball take longer to slow down. */
   /* 这的贝塞尔曲线用作调整动画的速度。
   这个例子使小球的减速时间更长了*/
@-webkit-keyframes ball-x {
   0% { -webkit-transform: translateX(-275px); }
   100% { -webkit-transform: translateX(0px); }
}

这样,我们通过一个动画移动小球的侧方向(ball-x),另一个动画控制小球的弹跳(ball-y)。 这个方法唯一不好的地方在于,如果你想做的事情很复杂,最终会让你陷入一堆缺乏语义的代码堆砌之中。

查看弧线效果

解决方案

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:在京东网站前端监控平台的最佳实践,CSS动画学

上一篇:前端资源预加载并展示进度条,时要避免的几个 下一篇:前端实现,static以及继承
猜你喜欢
热门排行
精彩图文