你不知道的CSS中的过渡效果

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

路难行，行路难，一身汗水，满心长。脚下百里路，头顶艳阳天。坚定如磐石，信念似火烧。好男儿，人穷志不缺，天道也酬勤。四方走，走四方，一身是胆，豪气壮。前方坎坷途，千难万般阻。心若有明灯，身似般若行。好男儿，大志存高远，四海皆为家。

什么是过渡

CSS transition提供了修改CSS的样式属性值时控制值变化时间的方式。简单来说，控制某一个或者多个CSS的样式属性值由一个值到另一个值，并不是立即生效，而是持续指定时间的过程。例如通过transition属性控制指定元素的背景颜色经历2秒的时长从白色变为黑色，而不是立即改变。

CSS transition属性可以设定指定元素的哪些CSS样式属性发生过渡效果、何时开始、持续多久以及如何执行动画效果等。

transition属性

CSS transition属性是一个简写 属性，该属性可以为指定元素在不同状态之间定义不同的过渡效果。

该属性可以分为以下几种子属性:

• transition-property属性: 用于定义过渡效果中的样式属性名称。
• transition-duration属性: 用于定义过渡效果执行动画的时长。
• transition-timing-function属性: 用于定义过渡效果计算的函数。
• transition -delay属性: 用于定义过渡效果开始的延迟时间。

浏览器兼容性

transition属性虽然已加入CSS3的标准规范中，但是有些浏览器仍然需要添加前缀才能正常使用。

/* WebKit引擎的浏览器(Chrome、 Safari. Opera) */
-webkit-transition : <single-transition>;
/* Gecko引擎的浏览器(Firefox) */
-moz-transition : <single-transition>;
/* Trident引擎的浏览器(IE 10+) */
-ms- transition : <single-transition>;
/* Presto引擎的浏览器(Opera) */
-o-transition : <single-transition>;

指定过渡属性名称

transition- property属性用于设定指定元素执行过渡动画的CSS样式属性名称。该属性的语法结构如下:

transition property : none| allI <single-transition-property>

• none:表示没有任何用于执行过渡动画的CSS样式属性。
• all:默认值，表示指定元素所有支持过渡动画的CSS样式属性。
• single-transition- property:表示过渡动画的样式属性。

值得注意的是，不是所有的CSS样式属性都支持过渡动画。

transition-property: none;
transition-property: all;
transition-property: width height;

指定过渡所需时间

transition-dur ation属性用于设定过渡动画执行所需的时长，单位为秒或毫秒。默认值为0秒，表示不出现过渡动画。

该属性允许设置多个时长，每个时长会被应用到transition- property属性设置的CSS样式属性上。

• 如果指定的时长的个数小于属性的个数，则时长列表会被重复，以与属性的个数匹配。
• 如果指定的时长的个数大于属性的个数，则时长列表会被裁减。

值得注意的是，上述两种情况下，通过transition-proper ty属性设置的CSS样式属性列表始终保持不变。

transition-duration: 6s; 
transition-duration: 120ms;
transition-duration: 1s, 15s;

指定过渡函数

transition- timing-function属性用于设置过渡动画执行过程的中间值是如何计算的。该属性可以设定浏览器的过渡速度以及过渡过程中的操作进展情况，通过该属性会建立一条加速度曲线，该加速度曲线会被作用到每个过渡的CSS样式属性。

transition-timing-function : <single-transition-timing-function>

single-transition-timing-function:用于过渡的计算函数。

• ease:默认值,元素样式从初始状态过渡到终止状态时速度由快到慢。
• linear:元素样式从初始状态过渡到终止状态时速度是匀速。
• ease- in:元素样式从初始状态过渡到终止状态时速度由慢到快。
• ease- out:元素样式从初始状态过渡到终i止状态时速度由快到慢。
• ease-in-out:元素样式从初始状态过渡到终止状态时，先加速再减速。
• step:将整个过渡过程划分成相同大小的间隔，每个间隔是相等的。

指定过渡延迟时间

transition- delay属性用于设置指定元素开始过渡动画之前需要等待的时长，单位为秒或亳秒。

• 如果值为正数时，则表示延迟多长时间开始过渡动画。
• 如果值为负数时，则导致立即开始执行过渡动画。

transition-delay: 3s; 
transition-delay: 2s, 4ms;

伪类触发过渡

过渡动画效果可以通过CSS的伪类进行触发，例如鼠标悬停( :hover )、获取焦点(:focus)等。

.transition{
    background: #8ec63f;
    width: 100px;
    height: 100px;
    border-radius: .5em;
    -webkit-transition: background 2s linear 25, border-radius 3s ease in 4s;
    -moz-transition: background 2s linear 2s, border-radius 3s ease-in 4s;
    -o-transition: background 2s linear 2s, border-radius 3s ease-in 4s;
    -ms-transition: background 2s linear 2s, border-radius 3s ease-in 4s;
    transition: background 2s linear 2s, border-radius 3s ease-in 4s;
}
.transition:hover {
    background:#f7941d;
    border-radius: 50%; 
}

transitionend事件

• WebKit弓|擎的浏览器提供了webkitTransitionEnd事件。
• Presto引擎的浏览器提供了oTranstionEnd事件。

transitionend事件提供了以下两个属性:

• propertyName属性:字符串类型，表示已完成过渡动画的CSS样式属性。
• elapsedTime属性:浮点类型，表示当transitionend事 件被触发时过渡动画已执行的时间(单位为秒)。该属性值不会受到transition- delay的影响。

/*
*在指定的元素上监听transitionend事件，例如#slidingMenu
*然后指定-个函数，例如showMessage()
*/
function showMessage() {
console.log('Transition已完成);
}
var element = document.getElementByld( slidingMenu'; 
element.addEventListener(' transitionend', showMessage);