CSS3衔接模块,transition规范的实际上接纳经验

CSS3 transition规范的其实使用经验

2014/01/16 · CSS ·
CSS,
CSS3

原稿出处: Rodney
Rehm   译文出处:腾讯ISUX   

本篇文章首要讲述CSS3
transition规范和在不一致浏览器之间的应用差别,关于切实解决措施或如何躲过难点的见地可以参见另一篇非常有理念的文章,“All
You Need to Know About CSS
Transitions”。亚历克斯MacCaw讲述的是有关贯彻特定的效能,而我要谈的是技巧背景,主要探讨在应用CSS过渡的进程中所未预料到的标题。

布局
(HTML),表现(CSS),以及表现(JavaScript)相分离并不是哪些新鲜的政工,可是CSS
能跨越这些界限并且可以在长期内得到实在的利用,这还确确实实是一个一心两样的探讨话题。

几周前,我付出一个 JavaScript 模块,在力所能及利用 CSS
过渡的口径下,JavaScript
端又力不从心获得到完结联网的办法。实际蒙受的题材是这多头根本没有办法同步,经过一连的测试后,我只能舍弃。而自己的测试结果正是本文所描述的。

第一,大家要说一下getcomputedstyle(),是一种用 JavaScript
再次回到浏览器渲染CSS的属性值的方法。 这么些措施能够查看“DOM Level 2:
getComputedStyle()”和“CSS
Level 2: Computed
Values”。

那对于像 font-size 那样的属性, 通过一个参数便足以转移为像素值。
但对于可以缩写的属性值,例如 margin
,一些浏览器则赶回为空。再不怕这一个同一属性的不比属性值,例如 font-weight
的值 bold 和700。WebKit也有一个小bug,它会从伪对象中提取出属性值。

此间所讲述的浏览器之间的差距是二〇一三年3月在选拔 Firefox18(Gecko),Opera
12.12 (Presto), Internet Explorer10(Trident),Safari
浏览器6.0.2(WebKit),Chrome 23(WebKit) 以及 Gecko 和 WebKit的
Nightly build channels。

火急,让我们来一起看一下规范与事实上情况的差异,为了便利,我概括了各浏览器的前缀。在文中自己透过创建一个 CSS3
Transitions Test
Suite 来发现难题。

1、指定过渡
CSS3 transitions 规范定义了以下多少个 CSS 属性:

  • transition-property
  • transition-duration
  • transition-delay
  • transition-timing-function

连接性质
transition-property 是用来指定当元素其中一个性质改变时实施 transition
效果。系统默许值是
all,那象征浏览器可以以动画片方式展现所有的可过渡属性(transition-duration持续时间当先0s),该属性协助单个值或以逗号隔开的多少个值列表(跟其余所有transition-*品质一样)。

亚洲必赢官网,正式规定,一个浏览器应该接受并保存任何它不可能识其他属性。因而,上边的事例中校会看出持续2秒的
padding 过渡:

CSS

transition-property:foobar,padding; transition-duration:1s,2s;

1
2
transition-property:foobar,padding;
transition-duration:1s,2s;

差距于规范的是,上边的事态在 WebKit 下会解析为 transition-property:
all。 而 Firefox 和 Opera 会解析为 transition-property: all, padding.

连片持续时间
transition-duration
属性规定了一个连缀从上马状态到对象状态的持续时间。它承受以秒或微秒的值(例如,2.3S和2300ms都是指2.3秒)。
即使规范明确规定了过渡值必须为正数,但 Opera
仍接受-5S的值,至少对于getComputedStyle()来说是那般的。尽管专业中并从未界定属性值的高低,但
Opera 和 IE 不接受低于10ms的值。而 WebKit 在
getComputedStyle()执行中有个小bug,例如:再次来到值0.009999999776482582s会代替0.01s。

连接延迟时间
transition-delay
属性规定了在推行一个连着此前的等候时间,同样利用值。Delay
能够是负值,但那会招致动画无法平滑对接。
IE 和 Opera 不收受 transition-duration 在-10ms和10ms之间的值。WebKit 的
floating point 也会在此刻出现。

transition-timing-function
属性规定了交接效果的年华曲线。包含cubic-bezier(x1, y1, x2, y2),
step(, start|end),和先期定义的 cubic-bezier 曲线关键词,linear, ease,
ease-in, ease-out和ease-in-out。在运用 LEA Verou 特有的 cubic-bezier
曲线编辑器时,cubic-bezier 背后的公式就变得不再首要。即便 cubic-bezier
曲线会平滑过渡,不过step()函数会在一个恒定的距离跳到下一个值。那样便会发出逐帧动画的功效;如“Pure
CSS3 Typing Animation With
steps()”。

linear 的计算值日常表示为 cubic-bezier(0, 0, 1, 1)—— WebKit除外。但
WebKit 照旧会再次回到 cubic-bezier(0.25, 0.1, 0.25, 1),而不是
ease。规范规定 X 值的必须介于0和1里边,y 值可以超越该限量,而Web基特 允许
X 超越此限制,而 Android 浏览器(4.0版本)却混淆了x和y的界定。

2 过渡完结
自我面前早已提到了 CSS 过渡异步运行的题材。规范提及了 TransitionEnd
事件允许 JavaScript
与已到位的联网同步举行。但可恶的是该专业对此并没实际阐释。事实上,它只是简短地表明单个事件会因为已成功交接的性质而被终止。

正规提出缩写属性(如padding)应为包罗其在内的保有属性(padding-top,padding-right,等等)落成对接,它并从未说哪些属性应该在
TransitionEnd
事件中被实际命名。然则尽管过渡被定义为缩写属性(如padding),Gecko,Trident
和 Presto 对于常见书写的子属性(如padding-top)同样可以完成对接,而
WebKit 则会堵住过渡。 要是您指定 transition-property: padding,WebKit会为 padding 执行过渡, 但 transition-property: all 那样就会指向
padding-left 执行新的联网。而当 padding 正执行过渡时, 索尼爱立信 6.0.1 的
Safari 浏览器在也得以执行 font-size 和 line-height的连片。

CSS

.example{padding:1px;transition-property:padding;transition-duration:1s;}
.example:hover{padding:10px;}

1
2
.example{padding:1px;transition-property:padding;transition-duration:1s;}
.example:hover{padding:10px;}

上述 CSS 将在分裂浏览器下触发差距的 TransitionEnd:
Gecko,Trident,Presto:
padding-top,padding-right,padding-bottom,padding-left
WebKit:
padding

CSS

.example {padding: 1px;transition-property: all,
padding;transition-duration:1s;} .example:hover{padding:10px;}

1
2
.example {padding: 1px;transition-property: all, padding;transition-duration:1s;}
.example:hover{padding:10px;}

上述 CSS 将在差距浏览器下触发分化的TransitionEnd:
Gecko,Trident,Presto,WebKit:
padding-top,padding-right,padding-bottom,padding-left
Safari 6.0.1 on iPhone:
padding-top, padding-right, padding-bottom, padding-left, font-size,
line-height

您可以指定负值 transition-delay
来“急迅落成”转换。可是transition-duration: 1s; transition-delay: -1s; 在
Gecko 和 WebKit 下实施转换并会立刻跳转至目的值。而Trident 和 Presto
将不会触发任何事件。

WebKit在 getComputedStyle() 上相见的浮点难题也同等存在于
TransitionEnd.elapsed提姆e 中,所有的浏览器如此。
Math.round(event.elapsed提姆e * 1000) / 1000 可辅助修复。

WebKit 和 IE 浏览器下实施 background-position,会触发对
background-position-x 和 background-position-y 的 TransitionEnd,而不是
background-position 的TransitionEnd。

于是,即便你明白过渡正在实施,你也不可以器重已有的
TransitionEnd.propertyName。即使你可以编写多量的 JavaScript
来弥补,但在未曾对每一个质量进行适宜品质检测的景观下,尽管你使用新式方法也将无法完毕。

3 过渡性质
规范列出了浏览器协理动画过渡的局地CSS属性。当然也席卷CSS2.1的性质。还有部分能够动态变化的新属性,如 Flexible
Box Layout。

该属性数值类型格外紧要。margin-top
接受和值,但依照可对接CSS属性列表,唯有是可已毕动画效果。但那并不可以让浏览器开发商避开值已毕联网。不过,word-spacing
属性除外。该属性包括值,但尚未浏览器能以卡通格局浮现。

抛开 TransitionEnd
事件,如果在连片爆发的指定时间内,getComputedStyle()值从A变到B,该属性就会从值A过渡为值B。要是没有履行,例如“CSS属性值爆发变化”,那么可能应该密切甄别下DOM。set提姆eout()的解析度还不够好以高达急迅对接(小于几百微秒的持续时间),那时候requestAnimationFrame()即便你的助理。在重绘前会提示您,并提供了部分当中值供参考。除了opera,其他的都能够扶助。

4 过渡性质的事先级
transition-property
规范允许很多次连贯单个属性,固然单个属性在“过渡性质”中的值被反复指定,过渡将由此持续时间,延迟和时间曲线给出的值来兑现。因而,大家得以兑现
padding 过渡持续1秒,padding-left 过渡持续2秒; 或使用
transition-property: all 来定义默认属性类型一视同仁置特定属性。
在 Firefox 和 IE 浏览器上,那个都并未任何难题。 但
opera下会搅乱优先顺序。它认为 padding-left 比padding 和 all
越发切实,而不是粗略地利用最终一个质量。

最大的标题是WebKit。即使一个性质被反复点名,它将开展很多次接入。
如若想让WebKit崩溃,尝试用transition-duration
:0.1秒运行transition-property: padding,
padding-left,WebKit将至少实施一遍对接。但更有趣的是,TransitionEnd可以进行过多次的纯粹过渡。

5 auto的转变
CSS 属性中的 auto 值可以自适应宽度,假若块级元素设置了width:
auto,那么就会持续父级的肥瘦。有时你必要从 width: auto
改变到一个具体涨幅,并且必要衔接那个改变。当然本标准并不曾强制或否定
auto 值可用以过渡。

Firefox,IE 和 Opera 不可能从 or 值过渡到 auto 值。 IE 下有 z-index
有一点点不比,但仅此而已。 另一方面,WebKit 可以从and 过渡到几乎可以承受
auto 值的任意CSS 属性。WebKit 不太喜欢 clip;因为那几个特性,它只会吸引
TransitionEnd 过渡,而连贯时期不会发出或浮现其余中间值或状态。
对此此外属性,如 width 和 height,WebKit 下会有一些差距。假诺 width:
auto 过渡为 300px 的涨幅,然后再连接成 100px,那么过渡不会从 300 缩至100
像素。它会从 0 扩张到 100 像素。

有关全体的包容性列表,可以查看“CSS Animatable Properties.”

6 隐式过渡
隐式过渡爆发在当一个特性的转移引起另一个属性被连接的时候,
或者当您想更改一个父级元素中的属性,
会导致子元素不论是三番五次过渡或附属属性的交接。font-size: 18px, padding:
2em—–padding 会被统计为 2 × font-size, em 就是36像素。

有各式各个的相持值类型:, , em, rem, vh, vw等等。使用一个相对值,如
padding: 2em,让浏览保养新统计属性的
getComputedValue(),每便应变量(如font-size)都会发出变更。由于统计样式改变,将扭曲导致
padding
的连接。那种连接被定义为“隐式过渡”,因为padding属性值没有被改动。

一大半浏览器会完毕那种隐式过渡。除了 IE 10,只对 line-height
属性执行隐式过渡。除了 vertical-align 外,Webkit
可以本着任何兼具属性执行隐式过渡。除了字体相对属性值,还有小幅相对属性值(平时为),相对属性值(如vh和vw),默许初叶值(Opera中的column-gap:
1em),还有“currentColor”。所有那个都有可能会,也可能不会挑起隐式过渡。

在 Firefox 中, 当继承和直属属性执行过渡,但他们的 transition-duration 或
transition-delay 并从未随着过渡, 这个隐式过渡就会变得专程有趣。 而
Webkit 和 Opera 执行过渡时会很有视觉感,但 Firefox
会稍显凌乱。在IE中不会轻易执行隐式过渡。

其余,别忘了继承, DOM 元素的 font-size
将会由其子元素继承,只要不被掩盖,就可能滋生隐式过渡。

7 转换和伪元素
伪元素(:before和:after),在 CSS2 中早已有了介绍. 如若不熟悉可以查看
“Learning to Use the :before and :after Pseudo-Elements in
CSS”。
固然 CSS3
中定义了附加的伪元素(::alternate,::outside),可是他们(到如今为止)还并不曾被协助。由此具有
CSS 动画属性也应有是伪元素的卡通属性。

Firefox 和 IE 10 可以在伪元素上落成属性过渡. 而 Opera,Chrome 和 Safari
则不会。 WebKit 从二〇一三年元月起也开头援助。

伪元素的连接会导致内容本身暴发一些新题材,因为在云谲波诡内容时 TransitionEnd
过渡根本还不曾达成。 在某一时间段内,他们相应在主元素上被触发,并因而TransitionEnd.pseudoElement
提供伪元素,但即便是“CSS动画过渡”的“过渡事件”部分,编写者的方案也并没有点名哪一个最合适。

咱俩想要改变 content 属性值,由此IE
8将在非凡规情状下(比如:hover状态)将会另行渲染该因素。结果声明,对老的IE版本举办包容会影响到拥有其余浏览器的功用。所以,
当试图在伪元素上进展品质过渡时,要保管 content 的值不会被转移。

若果主元素没有运行:hover状态,那么 IE 10
将不对准伪元素“:hover”执行过渡。

CSS

.some-selector:before{content:”hello”;color:red;transition:all 1s linear
0s;} .some-selector:hover:before{color:green;}

1
2
.some-selector:before{content:"hello";color:red;transition:all 1s linear 0s;}
.some-selector:hover:before{color:green;}

在 IE10 下,:before在 mouseover 的时候,:hover 是必定要定义的。

这几个难点在于不是早晚要求您定义主元素:hover 状态。而是一旦没有定义,IE 10
会将:hover解释为:active。更奇怪的是,:active状态竟然会在 mouseup
后继续不断,而当你再一次点击就会废除。

8 背景标签
在编辑标签时,IE 10
是唯一可对背景或前景响应的浏览器,假如标签变为背景后,就算它会成功正在实施的连通,但它不会实施新的连通。IE
10 将等到标签变为前景后再举办新过渡。幸运的是,IE 10
已经支撑页面的可知性 API,允许开发人员应对那种操作行为。

9 隐藏元素
对于隐藏的因素,过渡是不会被执行的,因为半数以上浏览器都显明认为尚未要求在一个看不见的元素里运行过渡。不过,也有特例,在
Opera 下无论元素隐藏与否它都将履行过渡。

10 过渡从前,DOM树是不是加载达成
当文档脱离解析情势时,DOMContentLoaded 被触发,倘诺您在采取jquery,那么应该了然jQuery.ready(),过渡可以在那从前运行。

11 渲染差别
以此难点我前边已经说过了,
本文就是根据自己的测试结果举办演讲的。测试是机动运行的,但事实申明,依然发现了众多题材。
及时要落实从渐变到渐变的背景过渡是没办法的,但足以兑现从渐变到纯色的连接。若是渐变正在进展中,从白色到目标颜色的交接即将开首,在对接启动时,会看到白色在急迅眨眼。近期有所的浏览器中都可以发现到那点。

不过Firefox
就像是用分裂的算法来渲染图像的,以标明它们执行了动画过渡(见实例)。很明确,在动画过渡时,
Gecko 并不曾显现好的功能。假如 transform: scale()
丰裕低,那种气象将时有暴发。

Firefox 不会从 a:visited 到 a:hover 进程中连着动画,反之亦然。 但它会从
a:visited 直接跳到 a:link,然后对接到 a:hover 状态,
你可以在那一个例子中看到,这是在 Mozilla
Developer Network”Privacy and the :visited
Selector”中涉及的。可是IE 10 与 Chrome,Safari 和 Opera
浏览器同样,会从a:link到a:visited已毕连通。
假诺子元素的 position 改变时, Firefox 不会触发元素的质量, 而
WebKit,Opera 和 IE 10 则会触发。

12 对规范的提出
看完了整个规范并对持有成效拓展了测试之后,觉得只要能拓展以下优化将会更好:

  • 加盟TransitionsEnd(注意是复数),一个要素的享有连接一旦形成就启动触及。它能告诉一名目繁多已被触发的特性,可是不需求了然怎么已被接通,
    只要明白所有的动画片过渡几时可以完结即可。
  • 加盟 TransitionStart 义务,以便可以获得每个待过渡性质。因为
    JavaScript 的事件循环和渲染路径不必然能相互制约,单一的
    TransitionsStart(也会再也多次)可能是更好的缓解方案。我不驾驭干什么要
    cancel 义务,所以那就叫“操作后就不再管”。
  • 要强烈怎么样 TransitionEnd 须求被触发,前边举例的 WebKit 中 padding 和
    padding-left 的难点会令人很喉咙痛。
  • 要精晓表明“隐形过渡”怎样处理, 前边例子中 transition-property:
    font-size的line-height: 1em 应该要有醒目的处理格局。
  • 内需丰盛那多少个允许定义 pointer-events: none
    并避免意外悬停状态的::transitioning伪类,那里幸免滥用样式,因为他们本身会吸引新的衔接或者变改正在展开的连通。除了那个提出,大家还亟需能在不大批量运用
    JavaScript 举办增援的景况下展开部分例行操作。
  • 有时你须要禁用过渡。例如,为了在网站访问者面前表现周详衔接此前,你必要调整布局并对尺寸规格举行规范计算对任务进行周到布局。
  • CSS3衔接模块,transition规范的实际上接纳经验。奇迹你想即刻从 DOM 中移除一个对象。你可以加上一个类,等待
    TransitionEnd 完结后再开展删减。
  • 跟删除对象一样,你想要添加一个新因素。你可插入那么些因素,设置“隐藏”以落到实处新因素的体制变化。
  • 再一次排序,隐藏和出示元素都相比普遍。针对这几个进展体制操作就要像操作实用程序一样,如 Isotope。

13 使用delay
动用延时,能够很好的解决无意的鼠标悬停造成的样式变化,就如set提姆eout()。

14 总计(可参看前边谈到过的实例)

  • 运用 transition-property: all 时注意,否则将赶上本不需求开展转换的
    TransitionEnd 景况。
  • 当使用可缩写属性时,触发事件的数目会基于差距浏览器而各异。
  • Opera 和 IE 不接济延迟时间为负值。
  • Webkit在性质优先级上存在难点,例如:要防止transition-property:
    margin, margin-left的情况。
  • IE不协理隐式转换。
  • Firefox和Opera不可以解析 transition-property: all, width。
  • Opera 混淆了品质的预先级。
  • 伪元素的联网不会潜移默化 TransitionEnd。
  • 伪元素的连片在 IE 10 下会并发:hover的bug。

    赞 收藏
    评论

亚洲必赢官网 1

本篇小说主要描述CSS3
transition规范和在不一致浏览器之间的行使差距,关于具体解决格局或如何规避难点的看法可以参照另一篇尤其有意见的稿子,“All
You Need to Know About CSS
Transitions”。亚历克斯MacCaw讲述的是有关落成特定的成效,而自己要谈的是技术背景,主要切磋在采纳CSS过渡的历程中所未预料到的问题。

  本篇作品首要描述CSS3
transition规范和在不一致浏览器之间的施用差距,关于具体解决办法或怎么样躲过难点的见解可以参见另一篇更加有眼光的篇章,“All
You Need to Know About CSS
Transitions”。AlexMacCaw讲述的是有关落到实处特定的功效,而自己要谈的是技术背景,主要商量在行使CSS过渡的经过中所未预料到的标题。

CSS3交接模块

[部分图纸和文字出自:]http://www.css88.com/archives/4705

结构
(HTML),表现(CSS),以及作为(JavaScript)相分离并不是哪些新鲜的政工,然而CSS
能跨越那几个界限并且可以在短时间内得到实在的使用,那还当真是一个一心两样的座谈话题。

亚洲必赢官网 2

1、什么是CSS3过渡?

CSS3 过渡(transition)是因而定义元素从 起源的意况 和 为止点的情景
,在肯定的光阴距离内已毕要素平滑地连通或变化
的一种补间动画机制。你能够让属性的更动进度持续一段时间,而不是立时生效。

通过transition你可以控制哪些属性暴发动画效果
(可以经过明确地列出这几个属性),哪天开端动画 (通过设置delay), 动画持续多久(通过安装duration), 以及哪些动画
(通过定义timing函数,比如线性地或初始快结尾慢)。

几周前,我付出一个 JavaScript 模块,在力所能及选择 CSS
过渡的规格下,JavaScript
端又心中无数获得到贯彻连接的点子。实际际遇的难题是这两边根本没有章程同步,经过反复的测试后,我不得不废弃。而自我的测试结果正是本文所讲述的。

  结构
(HTML),表现(CSS),以及作为(JavaScript)相分离并不是何等特殊的事体,然而CSS
能跨越那些界限并且可以在长期内得到实质上的应用,那还真的是一个完全两样的商量话题。

2、过渡的三要素

1、必须有某个元素的习性发生改变
2、规定您愿意把效益添加到哪个 CSS 属性上
3、规定职能的时长

首先,大家要说一下getcomputedstyle(),是一种用 JavaScript
重返浏览器渲染CSS的属性值的方式。 这些办法可以查阅“DOM Level 2:
getComputedStyle()”和“CSS
Level 2: Computed
Values”。

  几周前,我付出一个 JavaScript 模块,在能够使用 CSS
过渡的尺码下,JavaScript
端又力不从心赢得到落到实处连通的章程。实际蒙受的题材是那二者根本没有艺术同步,经过一再的测试后,我只得放弃。而我的测试结果正是本文所描述的。

3、CSS3衔接有怎么着属性?

属性 描述
transition 简写格式。用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的css属性名称。
transition-duration 规定过渡要花费的时间,默认是0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡从何时开始。默认是0。

那对于像 font-size 那样的质量, 通过一个参数便足以转移为像素值。
但对于可以缩写的属性值,例如 margin
,一些浏览器则赶回为空。再不怕那个同一属性的不比属性值,例如 font-weight
的值 bold 和700。WebKit也有一个小bug,它会从伪对象中领取出属性值。

  首先,我们要说一下getcomputedstyle(),是一种用 JavaScript
再次回到浏览器渲染CSS的属性值的法门。 这些方式可以查看“DOM Level 2:
getComputedStyle()”和“CSS
Level 2: Computed
Values”。

3.1 transition-property(过渡性质)

语法
transition-property: none|all|property;

亚洲必赢官网 3

image.png

  • 指定为
    none时,没有品质会赢得过渡效果,已经履行的连接效果也会及时停止。
  • 默许值为all,元素任何可对接(transition)属性值变化时都将进行过渡(transition)效果。
  • 可以单独指定元素哪些属性改变时实施过渡(transition),可以触发浏览器reflow或repaint的性质那多少个CSS属性可以采用动画,可参见:https://developer.mozilla.org/zh-CN/docs/CSS/CSS\_animated\_properties此间列出富有的CSS属性,要是可以做动画,那么会注脚是什么样设置。

此间所描述的浏览器之间的差别是二〇一三年3月在使用 Firefox18(Gecko),Opera
12.12 (Presto), Internet Explorer10(Trident),Safari
浏览器6.0.2(WebKit),Chrome 23(WebKit) 以及 Gecko 和 WebKit的
Nightly build channels。

  那对于像 font-size 那样的特性, 通过一个参数便可以变换为像素值。
但对于可以缩写的属性值,例如 margin
,一些浏览器则赶回为空。再不怕那几个同一属性的不相同属性值,例如 font-weight
的值 bold 和700。WebKit也有一个小bug,它会从伪对象中提取出属性值。

3.2 transition-duration(过渡持续时间)

1.用来指定过渡的持续时间。时间值如:1s(秒),800ms(飞秒)。
2.默许值是0s。也得以精通为没有连通(transition)效果。

语法

transition-duration: time;

亚洲必赢官网 4

image.png

急不可待,让我们来共同看一下标准与事实上情状的差别,为了便于,我不难了各浏览器的前缀。在文中自我经过创办一个 CSS3
Transitions Test
Suite 来发现标题。

  那里所描述的浏览器之间的不一样是二零一三年一月在利用
Firefox18(Gecko),Opera 12.12 (Presto), Internet
Explorer10(Trident),Safari 浏览器6.0.2(WebKit),Chrome 23(WebKit)
以及 Gecko 和 WebKit的 Nightly build channels。

3.3 transition-timing-function(过渡时间函数)

语法:
transition-timing-function:
linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

指定CSS属性的变换速率,预设的有:ease, linear, ease-in, ease-out,
ease-in-out, cubic-bezier(x1, y1, x2, y2),默许值时ease:

1.ease:(逐步变慢)默许值,等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2.linear:(匀速),等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3.ease-in:(加快),等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4.ease-out:(减速),等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5.ease-in-out:(加快然后减速),等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6.cubic-bezier为经过贝塞尔曲线来计算“转换”进度中的属性值,如下曲线所示,通过转移P1(x1,
y1)和P2(x2, y2)的坐标可以更改总体进度的Output
Percentage。w3c文档中公布是所有值需在[0,
1]区域内,否则无效。然而在局地浏览器(Chrome,Firefox,Opera,IE11
预览版)下对P1(x1, y1)和P2(x2,
y2)的坐标中的y1和y2并从未那么些限制,曲线可以是负值,也可以取大于1的值。如果x1和x2是负数,或者高于1的值那么直接接纳最后样式没有接通效果。而有些老版本的浏览器曲线值仍需在[0,
1]区域内,否则直接选用最后样式,比如Opera
12,和老版本的webkit浏览器,其余没测试。能够看看下边demo中的最终一个案例-Awesome!

查看demo:不同的timing functions demo
http://css88.com/demo/css3\_transition/

推荐七个简易直观的cubic-bezier() 贝塞尔曲线设置工具:

http://www.webstuffshare.com/2012/04/showing-product-information-with-css3-3d-transform/

http://cubic-bezier.com/
注:关于step-start,step-end,steps(<integer>[, [ start | end ]
]?)取值那里不做注解,我们可以看看
http://www.w3.org/TR/css3-transitions/\#transition-timing-function-property

http://www.css88.com/archives/5403/https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

1、指定过渡
CSS3 transitions 规范定义了以下三个 CSS 属性:

  文不加点,让大家来一同看一下业内与事实上处境的出入,为了便于,我简单了各浏览器的前缀。在文中我经过创办一个 CSS3
Transitions Test
Suite 来发现难题。

3.4 transition-delay(过渡延迟函数)

指定一个卡通开首推行的时光,即当改变元素属性值后多久起初履行“转换职能”,早先默许值为0;

亚洲必赢官网 5

image.png

  • transition-property
  • transition-duration
  • transition-delay
  • transition-timing-function

  1、指定过渡

  CSS3 transitions 规范定义了以下七个 CSS 属性:

  • transition-property
  • transition-duration
  • transition-delay
  • transition-timing-function

  连接性质

  transition-property 是用来指定当元素其中一个性质改变时实施
transition 效果。系统默许值是
all,那代表浏览器可以以动画模式突显所有的可过渡属性(transition-duration持续时间超过0s),该属性扶助单个值或以逗号隔开的三个值列表(跟其他具有transition-*特性一样)。

  规范规定,一个浏览器应该接受并保存任何它无法识其他属性。由此,下边的例证少校相会到持续2秒的
padding 过渡:

1
2
transition-property:foobar,padding;
transition-duration:1s,2s;

  分裂于规范的是,上面的景况在 WebKit 下会解析为 transition-property:
all。 而 Firefox 和 Opera 会解析为 transition-property: all, padding.

  联网持续时间

  transition-duration
属性规定了一个联网从先河状态到目标状态的持续时间。它承受以秒或毫秒的

值(例如,2.3S和2300ms都是指2.3秒)。

  固然规范明确规定了过渡值必须为正数,但 Opera
仍接受-5S的值,至少对于getComputedStyle()来说是那样的。即使正规中并从未限定属性值的尺寸,但
Opera 和 IE 不收受低于10ms的值。而 WebKit 在
getComputedStyle()执行中有个小bug,例如:重回值0.009999999776482582s会替代0.01s。

  连着延迟时间

  transition-delay 属性规定了在实践一个连接此前的等候时间,同样使用

值。Delay 可以是负值,但这会造成动画无法平滑对接。

  IE 和 Opera 不接受 transition-duration 在-10ms和10ms之间的值。WebKit的 floating point 也会在那儿出现。

  transition-timing-function
属性规定了交接效果的岁月曲线。包蕴cubic-bezier(x1, y1, x2, y2),
step(, start|end),和先行定义的 cubic-bezier 曲线关键词,linear, ease,
ease-in, ease-out和ease-in-out。在使用 LEA Verou 特有的 cubic-bezier
曲线编辑器时,cubic-bezier 背后的公式就变得不再紧要。即使 cubic-bezier
曲线会平滑对接,不过step()函数会在一个稳定的区间跳到下一个值。那样便会发出逐帧动画的效益;如“Pure
CSS3 Typing Animation With
steps()”。

  linear 的计算值平日表示为 cubic-bezier(0, 0, 1, 1)——
WebKit除外。但 WebKit 如故会回来 cubic-bezier(0.25, 0.1, 0.25,
1),而不是 ease。规范规定 X 值的必须介于0和1之内,y
值可以领先该限制,而WebKit 允许 X 当先此限制,而 Android
浏览器(4.0版本)却混淆了x和y的限量。

4、 transition的简写

语法
transition: property duration timing-function delay;

亚洲必赢官网 6

image.png

其余情形:当属性值列表长度不均等时

以 transition-property
的值列表长度为正式,若是某个属性值列表长度短于它的,则再一次值以长度一致,
例如:

css 代码:
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

将按上边这样处理:

css 代码:
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

类似地,若是某个属性的值列表长于 transition-property 的,将被截短。
例如:

css 代码:
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

将按下边那样处理:

css 代码:
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

 
联网性质
transition-property 是用来指定当元素其中一个性质改变时实施 transition
效果。系统默许值是
all,那意味着浏览器能够以动画片格局突显所有的可过渡属性(transition-duration持续时间超过0s),该属性帮忙单个值或以逗号隔开的七个值列表(跟其他具有transition-*质量一样)。

  2 连贯落成

  我眼前已经涉嫌了 CSS 过渡异步运行的题材。规范提及了 TransitionEnd
事件允许 JavaScript
与已做到的接入同步举行。但可恶的是该标准对此并没具体阐释。事实上,它只是简短地印证单个事件会因为已形成联网的习性而被终止。

  规范提议缩写属性(如padding)应为包涵其在内的享有属性(padding-top,padding-right,等等)已毕连通,它并从未说哪些属性应该在
TransitionEnd
事件中被实际命名。然则就算过渡被定义为缩写属性(如padding),Gecko,Trident
和 Presto 对于常见书写的子属性(如padding-top)同样可以兑现连通,而
WebKit 则会阻碍过渡。 倘若你指定 transition-property: padding,WebKit会为 padding 执行过渡, 但 transition-property: all 那样就会针对
padding-left 执行新的接入。而当 padding 正执行过渡时, 一加 6.0.1 的
Safari 浏览器在也足以执行 font-size 和 line-height的连接。

1
2
.example{padding:1px;transition-property:padding;transition-duration:1s;}
.example:hover{padding:10px;}

  以上 CSS 将在分化浏览器下触发不相同的 TransitionEnd:

  Gecko,Trident,Presto:

  padding-top,padding-right,padding-bottom,padding-left

  WebKit:

  padding

1
2
.example {padding: 1px;transition-property: all, padding;transition-duration:1s;}
.example:hover{padding:10px;}

  以上 CSS 将在分裂浏览器下触发分化的TransitionEnd:

  Gecko,Trident,Presto,WebKit:

  padding-top,padding-right,padding-bottom,padding-left

  Safari 6.0.1 on iPhone:

  padding-top, padding-right, padding-bottom, padding-left, font-size,
line-height

  你可以指定负值 transition-delay
来“快速完结”转换。但是transition-duration: 1s; transition-delay: -1s; 在
Gecko 和 WebKit 下执行转换并会马上跳转至目标值。而Trident 和 Presto
将不会接触任何事件。

  WebKit在 getComputedStyle() 上相见的浮点难题也同等存在于
TransitionEnd.elapsed提姆e 中,所有的浏览器如此。
Math.round(event.elapsedTime * 1000) / 1000 可协理修复。

  WebKit 和 IE 浏览器下执行 background-position,会触发对
background-position-x 和 background-position-y 的 TransitionEnd,而不是
background-position 的TransitionEnd。

  所以,即使你知道过渡正在实施,你也不可以凭借已有的
TransitionEnd.propertyName。即使你可以编写大批量的 JavaScript
来弥补,但在没有对每一个特性举办恰当品质检测的状态下,尽管你选用新式方法也将不能已毕。

5、怎么着执行过渡效果

css3联网动画一般通过鼠标事件仍旧鼠标状态定义动画,常常我们可以用CSS中伪类采用js修改元素的体裁属性充实删除样式来实施定义的卡通片。CSS中伪类执行动画蕴涵:

动态伪类 起作用的元素 描述
:link 只有链接 未访问的链接
:visited 只有链接 访问过的链接
:hover 所有元素 鼠标经过元素
:active 所有元素 鼠标点击元素
:focus 所有可被选中的元素 元素被选中

正规规定,一个浏览器应该接受并保留任何它不可能识其他属性。由此,上边的例证中将会晤到持续2秒的
padding 过渡:

  3 过渡性质

  规范列出了浏览器扶助动画过渡的一对CSS属性。当然也席卷CSS2.1的习性。还有局地方可动态变化的新属性,如 Flexible
Box Layout。

  该属性数值类型格外首要。margin-top
接受和值,但依照可对接CSS属性列表,唯有是可完毕动画效果。但那并不可以让浏览器开发商避开值达成联网。可是,word-spacing
属性除外。该属性包含值,但绝非浏览器能以动画片方式显得。

  撇开 TransitionEnd
事件,如果在联网暴发的指定时间内,getComputedStyle()值从A变到B,该属性就会从值A过渡为值B。如若没有进行,例如“CSS属性值暴发变化”,那么可能应该仔细审查下DOM。set提姆eout()的解析度还不够好以已毕连忙对接(小于几百飞秒的持续时间),那时候requestAnimationFrame()哪怕您的助理员。在重绘前会提示你,并提供了有些中间值供参考。除了opera,其余的都足以支撑。

1
2

  4 过渡性质的预先级

  transition-property
规范允许很多次联网单个属性,若是单个属性在“过渡性质”中的值被频仍指定,过渡将透过持续时间,延迟和时间曲线给出的值来贯彻。由此,大家得以兑现
padding 过渡持续1秒,padding-left 过渡持续2秒; 或接纳transition-property: all 来定义默许属性类型一碗水端平置特定属性。
在 Firefox 和 IE 浏览器上,那个都并未任何难点。 但
opera下会搅乱优先顺序。它认为 padding-left 比padding 和 all
尤其切实,而不是不难地运用最终一个特性。

  最大的难点是WebKit。如若一个属性被一再点名,它将展开频仍连通。
如若想让WebKit崩溃,尝试用transition-duration
:0.1秒运行transition-property: padding,
padding-left,WebKit将至少实施五回对接。但更幽默的是,TransitionEnd可以展开过数次的单一过渡。

差异于规范的是,上边的状态在 WebKit 下会解析为 transition-property:
all。 而 Firefox 和 Opera 会解析为 transition-property: all, padding.

  5 auto的转变

  CSS 属性中的 auto 值可以自适应宽度,假如块级元素设置了width:
auto,那么就会一连父级的升幅。有时你要求从 width: auto
改变到一个有血有肉涨幅,并且需要衔接那多少个改变。当然本专业并没有强制或否认
auto 值可用于过渡。

  Firefox,IE 和 Opera 不可能从 or 值过渡到 auto 值。 IE 下有 z-index
有一点点两样,但仅此而已。 另一方面,WebKit 可以从and 过渡到大概可以接受
auto 值的任意CSS 属性。WebKit 不太喜欢 clip;因为这一个特性,它只会抓住
TransitionEnd 过渡,而连贯期间不会暴发或体现任何中间值或气象。
对此其余属性,如 width 和 height,WebKit 下会有一部分差异。假设 width:
auto 过渡为 300px 的增加率,然后再连接成 100px,那么过渡不会从 300 缩至100
像素。它会从 0 增添到 100 像素。

  关于全体的包容性列表,可以查看“CSS Animatable Properties.”

连着持续时间
transition-duration
属性规定了一个连着从上马状态到对象状态的持续时间。它承受以秒或飞秒的值(例如,2.3S和2300ms都是指2.3秒)。
固然规范明确规定了过渡值必须为正数,但 Opera
仍接受-5S的值,至少对于getComputedStyle()来说是那样的。就算正式中并不曾限定属性值的深浅,但
Opera 和 IE 不接受低于10ms的值。而 WebKit 在
getComputedStyle()执行中有个小bug,例如:重临值0.009999999776482582s会代替0.01s。

  6 隐式过渡

  隐式过渡发生在当一个质量的变动引起另一个质量被接入的时候,
或者当你想改变一个父级元素中的属性,
会导致子元素不论是延续过渡或附属属性的连接。font-size: 18px, padding:
2em—–padding 会被计算为 2 × font-size, em 就是36像素。

  有丰裕多彩的冲突值类型:, , em, rem, vh, vw等等。使用一个相对值,如
padding: 2em,让浏览器重新总结属性的
getComputedValue(),每一回应变量(如font-size)都会发生变更。由于统计样式改变,将扭曲导致
padding
的衔接。那种连接被定义为“隐式过渡”,因为padding属性值没有被修改。

  超过一半浏览器会完成那种隐式过渡。除了 IE 10,只对 line-height
属性执行隐式过渡。除了 vertical-align 外,Webkit
可以针对任何兼具属性执行隐式过渡。除了字体相对属性值,还有小幅相对属性值(平时为),相对属性值(如vh和vw),默许初步值(Opera中的column-gap:
1em),还有“currentColor”。所有这一个都有可能会,也说不定不会挑起隐式过渡。

  在 Firefox 中, 当继承和从属属性执行过渡,但她俩的
transition-duration 或 transition-delay 并从未随着过渡,
这么些隐式过渡就会变得尤其好玩。 而 Webkit 和 Opera
执行过渡时会很有视觉感,但 Firefox
会稍显混乱。在IE中不会随便执行隐式过渡。

  此外,别忘了继承, DOM 元素的 font-size
将会由其子元素继承,只要不被遮住,就可能引起隐式过渡。

连通延迟时间
transition-delay
属性规定了在举行一个连片从前的等候时间,同样应用值。Delay
可以是负值,但那会促成动画不可以平滑对接。
IE 和 Opera 不收受 transition-duration 在-10ms和10ms之间的值。Web基特 的
floating point 也会在此刻出现。

  7 转换和伪元素

  伪元素(:before和:after),在 CSS2 中一度有了介绍.
即使不熟练可以查看 “Learning to Use the :before and :after
Pseudo-Elements in
CSS”。
即便 CSS3
中定义了额外的伪元素(::alternate,::outside),不过她们(到近来为止)还并从未被帮忙。因而具有
CSS 动画属性也理应是伪元素的动画属性。

  Firefox 和 IE 10 可以在伪元素上落到实处属性过渡. 而 Opera,Chrome 和
Safari 则不会。 WebKit 从二零一三年1四月起也发轫帮衬。

  伪元素的连片会促成内容本身爆发局地新题材,因为在变化莫测内容时
TransitionEnd 过渡根本还没有达成。
在某一时间段内,他们相应在主元素上被触发,并透过
TransitionEnd.pseudoElement
提供伪元素,但尽管是“CSS动画过渡”的“过渡事件”部分,编写者的方案也并不曾点名哪一个最合适。

  我们想要改变 content 属性值,由此IE
8将在奇特情形下(比如:hover状态)将会再次渲染该因素。结果注解,对老的IE版本举行包容会影响到具有其余浏览器的功能。所以,
当试图在伪元素上展开品质过渡时,要保障 content 的值不会被更改。

  假如主元素没有运行:hover状态,那么 IE 10
将不针对伪元素“:hover”执行过渡。

1
2
.some-selector:before{content:"hello";color:red;transition:all 1s linear 0s;}
.some-selector:hover:before{color:green;}

  在 IE10 下,:before在 mouseover 的时候,:hover 是必定要定义的。

  那几个题材在于不是早晚需要你定义主元素:hover
状态。而是只要没有概念,IE 10
会将:hover解释为:active。更奇怪的是,:active状态竟然会在 mouseup
后继续持续,而当你再一次点击就会吊销。

transition-timing-function
属性规定了连接效果的时刻曲线。包罗cubic-bezier(x1, y1, x2, y2),
step(, start|end),和优先定义的 cubic-bezier 曲线关键词,linear, ease,
ease-in, ease-out和ease-in-out。在接纳 LEA Verou 特有的 cubic-bezier
曲线编辑器时,cubic-bezier 背后的公式就变得不再主要。即使 cubic-bezier
曲线会平滑对接,不过step()函数会在一个原则性的区间跳到下一个值。那样便会发生逐帧动画的效能;如“Pure
CSS3 Typing Animation With
steps()”。

  8 背景标签

  在编辑标签时,IE 10
是唯一可对背景或前景响应的浏览器,借使标签变为背景后,固然它会已毕正在实践的交接,但它不会实施新的衔接。IE
10 将等到标签变为前景后再履行新过渡。幸运的是,IE 10
已经帮忙页面的可知性 API,允许开发人士应对那种操作行为。

linear 的计算值寻常表示为 cubic-bezier(0, 0, 1, 1)—— WebKit除外。但
WebKit 如故会回去 cubic-bezier(0.25, 0.1, 0.25, 1),而不是
ease。规范规定 X 值的必须介于0和1时期,y 值可以当先该限量,而WebKit 允许
X 超越此限制,而 Android 浏览器(4.0版本)却混淆了x和y的限定。

  9 隐藏元素

  对于隐藏的要素,过渡是不会被实施的,因为一大半浏览器都一览无遗认为没有需要在一个看不见的因素里运行过渡。可是,也有特例,在
Opera 下无论元素隐藏与否它都将执行过渡。

2 过渡落成
本身前边早已关系了 CSS 过渡异步运行的标题。规范提及了 TransitionEnd
事件允许 JavaScript
与已做到的联网同步举办。但可恶的是该规范对此并没实际阐释。事实上,它只是简短地印证单个事件会因为已形成过渡的习性而被终止。

  10 过渡从前,DOM树是还是不是加载达成

  当文档脱离解析形式时,DOMContentLoaded 被触发,要是你在利用
jquery,那么相应了然jQuery.ready(),过渡可以在这前边运行。

标准提出缩写属性(如padding)应为包含其在内的装有属性(padding-top,padding-right,等等)达成联网,它并没有说哪些属性应该在
TransitionEnd
事件中被现实命名。然则尽管过渡被定义为缩写属性(如padding),Gecko,Trident
和 Presto 对于一般书写的子属性(如padding-top)同样可以达成对接,而
WebKit 则会堵住过渡。 假使你指定 transition-property: padding,WebKit会为 padding 执行过渡, 但 transition-property: all 那样就会针对
padding-left 执行新的连通。而当 padding 正执行过渡时, Motorola 6.0.1 的
Safari 浏览器在也得以推行 font-size 和 line-height的连结。

  11 渲染差别

  这么些题材自己事先已经说过了,
本文就是依照自身的测试结果开展阐释的。测试是电动运行的,但事实声明,仍然发现了许多题材。
当即要促成从渐变到渐变的背景过渡是不能够的,但可以落成从渐变到纯色的联网。假诺渐变正在展开中,从白色到目标颜色的连片即将开首,在接入启动时,碰面到白色在迅速眨眼。如今拥有的浏览器中都可以发现到那一点。

  不过Firefox
就如是用不一样的算法来渲染图像的,以申明它们执行了动画过渡(见实例)。很强烈,在动画过渡时,
Gecko 并没有显现好的效益。假若 transform: scale()
丰富低,那种场地将爆发。

  Firefox 不会从 a:visited 到 a:hover 进程中连着动画,反之亦然。
但它会从 a:visited 直接跳到 a:link,然后对接到 a:hover 状态,
你可以在这一个例子中看到,这是在 Mozilla
Developer Network”Privacy and the :visited
Selector”中提到的。然而IE 10 与 Chrome,Safari 和 Opera
浏览器同样,会从a:link到a:visited完成连通。
如若子元素的 position 改变时, Firefox 不会触发元素的性质, 而
WebKit,Opera 和 IE 10 则会触发。

1
2

  12 对专业的提出

  看完了任何规范并对持有成效拓展了测试之后,觉得只要能拓展以下优化将会更好:

  • 到场TransitionsEnd(注意是复数),一个元素的有着连接一旦达成就开动触及。它能告诉一文山会海已被触发的性质,然而不需求精通怎么已被连接,
    只要精晓所有的动画片过渡曾几何时可以成功即可。
  • 进入 TransitionStart 任务,以便可以博得每个待过渡性质。因为
    JavaScript 的轩然大波循环和渲染路径不肯定能互相制约,单一的
    TransitionsStart(也会重复数次)可能是更好的化解方案。我不知道怎么要
    cancel 任务,所以那就叫“操作后就不再管”。
  • 要鲜明怎么着 TransitionEnd 要求被触发,前边举例的 Web基特 中 padding 和
    padding-left 的难点会令人很感冒。
  • 要肯定表达“隐形过渡”咋样处理, 前边例子中 transition-property:
    font-size的line-height: 1em 应该要有显著的处理格局。
  • 亟需加上那么些允许定义 pointer-events: none
    并预防意外悬停状态的::transitioning伪类,那里防止滥用样式,因为她们我会抓住新的连接或者变改进在举行的连接。除了那些提出,大家还亟需能在不多量使用
    JavaScript 进行扶助的动静下进展局地好端端操作。
  • 突发性你须求禁用过渡。例如,为了在网站访问者面前突显周全衔接之前,你须要调整布局并对尺寸规格举办准确计算对岗位进行周全布局。
  • 偶然你想立马从 DOM 中移除一个目的。你可以加上一个类,等待
    TransitionEnd 完毕后再展开删除。
  • 跟删除对象一样,你想要添加一个新因素。你可插入这么些元素,设置“隐藏”以促成新因素的体制变化。
  • 双重排序,隐藏和出示元素都比较常见。针对这个进展体制操作就要像操作实用程序一样,如 Isotope。

上述 CSS 将在差异浏览器下触发分裂的 TransitionEnd:
Gecko,Trident,Presto:
padding-top,padding-right,padding-bottom,padding-left
WebKit:
padding

  13 使用delay

  使用延时,可以很好的解决无意的鼠标悬停造成的样式变化,似乎set提姆eout()。

1
2

  14 统计(可参照前边谈到过的实例)

  • 运用 transition-property: all 时留意,否则将赶上本不须要展开转移的
    TransitionEnd 景况。
  • 当使用可缩写属性时,触发事件的数额会按照不一致浏览器而各异。
  • Opera 和 IE 不协理延迟时间为负值。
  • Webkit在品质优先级上设有难点,例如:要避免transition-property:
    margin, margin-left的处境。
  • IE不帮助隐式转换。
  • Firefox和Opera无法解析 transition-property: all, width。
  • Opera 混淆了品质的先期级。
  • 伪元素的连通不会潜移默化 TransitionEnd。
  • 伪元素的连结在 IE 10 下会产出:hover的bug。

  原文出处:Rodney
Rehm

以上 CSS 将在不一样浏览器下触发分化的TransitionEnd:
Gecko,Trident,Presto,WebKit:
padding-top,padding-right,padding-bottom,padding-left
Safari 6.0.1 on iPhone:
padding-top, padding-right, padding-bottom, padding-left, font-size,
line-height

您可以指定负值 transition-delay
来“火速达成”转换。不过transition-duration: 1s; transition-delay: -1s; 在
Gecko 和 WebKit 下执行转换并会立即跳转至目的值。而Trident 和 Presto
将不会触发任何事件。

WebKit在 getComputedStyle() 上相见的浮点难题也一样存在于
TransitionEnd.elapsed提姆e 中,所有的浏览器如此。
Math.round(event.elapsed提姆e * 1000) / 1000 可帮助修复。

WebKit 和 IE 浏览器下执行 background-position,会接触对
background-position-x 和 background-position-y 的 TransitionEnd,而不是
background-position 的TransitionEnd。

于是,尽管你精通过渡正在实施,你也无法借助已有的
TransitionEnd.propertyName。即便你可以编制多量的 JavaScript
来弥补,但在并未对每一个特性进行适量品质检测的场馆下,即使你接纳最新方法也将不可能已毕。

3 过渡性质
规范列出了浏览器襄助动画过渡的部分CSS属性。当然也囊括CSS2.1的特性。还有一部分足以动态变化的新属性,如 Flexible
Box Layout。

该属性数值类型极度重大。margin-top
接受和值,但据悉可对接CSS属性列表,只有是可完结动画效果。但这并无法让浏览器开发商避开值完毕连通。然则,word-spacing
属性除外。该属性包涵值,但并未浏览器能以卡通方式显示。

放弃 TransitionEnd
事件,即使在接入暴发的指定时间内,getComputedStyle()值从A变到B,该属性就会从值A过渡为值B。假若没有履行,例如“CSS属性值暴发变化”,那么可能应该仔细甄别下DOM。setTimeout()的解析度还不够好以完毕快捷对接(小于几百飞秒的持续时间),那时候requestAnimationFrame()哪怕您的助手。在重绘前会提示您,并提供了有的中路值供参考。除了opera,其余的都得以支撑。

4 过渡性质的先期级
transition-property
规范允许数十次衔接单个属性,假诺单个属性在“过渡性质”中的值被一再点名,过渡将经过持续时间,延迟和岁月曲线给出的值来落到实处。因而,大家可以实现padding 过渡持续1秒,padding-left 过渡持续2秒; 或行使
transition-property: all 来定义默许属性类型同等对待置特定属性。
在 Firefox 和 IE 浏览器上,这几个都没有其余难点。 但
opera下会搅乱优先顺序。它认为 padding-left 比padding 和 all
越发具体,而不是简简单单地接纳最终一个性质。

最大的标题是WebKit。即使一个特性被反复指定,它将展开数次过渡。
倘若想让WebKit崩溃,尝试用transition-duration
:0.1秒运行transition-property: padding,
padding-left,WebKit将至少实施一遍对接。但更有趣的是,TransitionEnd可以开展过多次的纯粹过渡。

5 auto的转变
CSS 属性中的 auto 值可以自适应宽度,要是块级元素设置了width:
auto,那么就会继续父级的大幅度。有时你须要从 width: auto
改变到一个实际涨幅,并且须求连接那几个改变。当然本专业并不曾强制或否认
auto 值可用以过渡。

Firefox,IE 和 Opera 不能从 or 值过渡到 auto 值。 IE 下有 z-index
有一点点不比,但仅此而已。 另一方面,WebKit 可以从and 过渡到大概可以承受
auto 值的任意CSS 属性。WebKit 不太喜欢 clip;因为这么些特性,它只会抓住
TransitionEnd 过渡,而连贯时期不会生出或显示其余中间值或状态。
对此任何属性,如 width 和 height,WebKit 下会有部分差异。如若 width:
auto 过渡为 300px 的涨幅,然后再连接成 100px,那么过渡不会从 300 缩至100
像素。它会从 0 增添到 100 像素。

关于全部的兼容性列表,可以查看“CSS Animatable Properties.”

6 隐式过渡
隐式过渡暴发在当一个属性的改观引起另一个质量被连接的时候,
或者当你想改变一个父级元素中的属性,
会导致子元素不论是继续过渡或附属属性的连通。font-size: 18px, padding:
2em—–padding 会被总结为 2 × font-size, em 就是36像素。

有各式各类的相对值类型:, , em, rem, vh, vw等等。使用一个相对值,如
padding: 2em,让浏览敬服新统计属性的
getComputedValue(),每一回应变量(如font-size)都会爆发改变。由于总结样式改变,将扭转导致
padding
的接入。那种连接被定义为“隐式过渡”,因为padding属性值没有被修改。

大多数浏览器会完毕那种隐式过渡。除了 IE 10,只对 line-height
属性执行隐式过渡。除了 vertical-align 外,Webkit
可以针对其余所有属性执行隐式过渡。除了字体相对属性值,还有小幅相对属性值(平常为),相对属性值(如vh和vw),默认开头值(Opera中的column-gap:
1em),还有“currentColor”。所有那些都有可能会,也恐怕不会唤起隐式过渡。

在 Firefox 中, 当继承和附设属性执行过渡,但她们的 transition-duration 或
transition-delay 并不曾乘势过渡, 那一个隐式过渡就会变得专程有意思。 而
Webkit 和 Opera 执行过渡时会很有视觉感,但 Firefox
会稍显混乱。在IE中不会自由执行隐式过渡。

此外,别忘了继承, DOM 元素的 font-size
将会由其子元素继承,只要不被覆盖,就可能引起隐式过渡。

7 转换和伪元素
伪元素(:before和:after),在 CSS2 中已经有了介绍. 假设不熟识可以查看
“Learning to Use the :before and :after Pseudo-Elements in
CSS”。
纵然 CSS3
中定义了额外的伪元素(::alternate,::outside),不过她们(到如今截至)还并从未被接济。由此有所
CSS 动画属性也理应是伪元素的卡通片属性。

Firefox 和 IE 10 可以在伪元素上落到实处属性过渡. 而 Opera,Chrome 和 Safari
则不会。 Web基特 从二零一三年元月起也开头帮衬。

伪元素的连通会招致内容本身爆发部分新题材,因为在转变内容时 TransitionEnd
过渡根本还从未终止。 在某一时间段内,他们应当在主元素上被触发,并经过
TransitionEnd.pseudoElement
提供伪元素,但哪怕是“CSS动画过渡”的“过渡事件”部分,编写者的方案也并从未点名哪一个最合适。

大家想要改变 content 属性值,因而IE
8将在奇特景况下(比如:hover状态)将会再一次渲染该因素。结果评释,对老的IE版本举办包容会影响到具有其余浏览器的频率。所以,
当试图在伪元素上拓展品质过渡时,要确保 content 的值不会被改变。

一经主元素没有运行:hover状态,那么 IE 10
将不对准伪元素“:hover”执行过渡。

1
2

在 IE10 下,:before在 mouseover 的时候,:hover 是自然要定义的。

以此标题在于不是迟早需求您定义主元素:hover 状态。而是一旦没有定义,IE 10
会将:hover解释为:active。更奇怪的是,:active状态竟然会在 mouseup
后持续持续,而当您再一次点击就会收回。

8 背景标签
在编制标签时,IE 10
是绝无仅有可对背景或前景响应的浏览器,倘诺标签变为背景后,尽管它会成功正在推行的接入,但它不会执行新的接入。IE
10 将等到标签变为前景后再实践新过渡。幸运的是,IE 10
已经帮忙页面的可见性 API,允许开发人士应对那种操作行为。

9 隐藏元素
对此隐藏的因素,过渡是不会被执行的,因为一大半浏览器都一目通晓认为尚未必要在一个看不见的元素里运行过渡。但是,也有特例,在
Opera 下无论元素隐藏与否它都将履行过渡。

10 过渡往日,DOM树是或不是加载已毕
当文档脱离解析形式时,DOMContentLoaded 被触发,假设您在选用jquery,那么相应驾驭jQuery.ready(),过渡可以在这前边运行。

11 渲染差距
以此题材自己事先已经说过了,
本文就是依照自身的测试结果举行讲演的。测试是半自动运行的,但事实注明,仍然发现了诸多题目。
立即要促成从渐变到渐变的背景过渡是不可以的,但可以完结从渐变到纯色的连结。即使渐变正在开展中,从白色到目的颜色的接入即将初步,在接入启动时,会看出白色在疾速眨眼。近日有所的浏览器中都可以发现到那或多或少。

然则Firefox
就像是用差其他算法来渲染图像的,以评释它们执行了动画过渡(见实例)。很明显,在动画过渡时,
Gecko 并从未表现好的效能。假设 transform: scale()
丰硕低,那种状态将发生。

Firefox 不会从 a:visited 到 a:hover 进度中连着动画,反之亦然。 但它会从
a:visited 直接跳到 a:link,然后对接到 a:hover 状态,
你可以在这么些例子中看到,这是在 Mozilla
Developer Network”Privacy and the :visited
Selector”中涉及的。然则IE 10 与 Chrome,Safari 和 Opera
浏览器同样,会从a:link到a:visited已毕对接。
假设子元素的 position 改变时, Firefox 不会触发元素的习性, 而
Web基特,Opera 和 IE 10 则会触发。

12 对业内的提出
看完了全副规范并对负有功能举行了测试之后,觉得即使能开展以下优化将会更好:

  • 投入TransitionsEnd(注意是复数),一个元素的拥有连接一旦落成就开行触及。它能告诉一名目繁多已被触发的属性,不过不须求精通怎么着已被接入,
    只要领会所有的卡通过渡哪一天可以形成即可。
  • 进入 TransitionStart 义务,以便可以收获每个待过渡性质。因为
    JavaScript 的事件循环和渲染路径不必然能相互制约,单一的
    TransitionsStart(也会再也多次)可能是更好的缓解方案。我不驾驭干什么要
    cancel 职责,所以那就叫“操作后就不再管”。
  • 要驾驭什么 TransitionEnd 须求被触发,前边举例的 WebKit 中 padding 和
    padding-left 的标题会令人很头疼。
  • 要分明表达“隐形过渡”怎样处理, 前边例子中 transition-property:
    font-size的line-height: 1em 应该要有明确的处理格局。
  • 须要加上那么些允许定义 pointer-events: none
    并预防意外悬停状态的::transitioning伪类,那里幸免滥用样式,因为她俩自我会引发新的连通或者变考订在拓展的对接。除了那一个提出,大家还要求能在不多量选取JavaScript 举办接济的情形下开展局地正规操作。
  • 有时你须要禁用过渡。例如,为了在网站访问者面前表现周到衔接从前,你必要调整布局并对尺寸规格举办精确计算对职分举办完美布局。
  • 奇迹你想立即从 DOM 中移除一个对象。你可以加上一个类,等待
    TransitionEnd 完毕后再拓展删减。
  • 跟删除对象一样,你想要添加一个新因素。你可插入那么些因素,设置“隐藏”以贯彻新因素的体制变化。
  • 重新排序,隐藏和出示元素都比较宽泛。针对那一个进展体制操作就要像操作实用程序一样,如 Isotope。

 
13 使用delay
应用延时,可以很好的化解无意的鼠标悬停造成的体制变化,就如setTimeout()。

14 总结(可参考前面谈到过的实例)

  • 使用 transition-property: all 时只顾,否则将境遇本不必要进行更换的
    TransitionEnd 景况。
  • 当使用可缩写属性时,触发事件的多寡会根据分裂浏览器而各异。
  • Opera 和 IE 不支持延迟时间为负值。
  • Webkit在质量优先级上存在难题,例如:要幸免transition-property:
    margin, margin-left的情况。
  • IE不扶助隐式转换。
  • Firefox和Opera不可以解析 transition-property: all, width。
  • Opera 混淆了质量的事先级。
  • 伪元素的连片不会影响 TransitionEnd。
  • 伪元素的衔接在 IE 10 下会冒出:hover的bug。

 
原文作者:Rodney
Rehm
初稿链接:

 

感谢您的翻阅,本文由 腾讯ISUX 版权所有,转发时请注解出处,违者必究,谢谢你的搭档。
表明出处格式:腾讯ISUX
()

网站地图xml地图