#test1{ transition-property: width,width,background; transition-duration: 2s,500ms; transition-timing-function: linear,ease; transition-delay: 200ms,0s; } #test2{ transition: width 500ms ease 0s,background 2s linear 200ms; }

 

过渡阶段

【1】过渡开始时间=样式改变的时刻+过渡延迟时间；而过渡结束时间=过渡开始时间+过渡持续

【2】过渡起始值=过渡前的过渡属性值；而过渡结束值=过渡完成后的过渡属性值

【3】过渡分为两个阶段：前进(forward)和反向(reverse)。若前进阶段进行一段时间后进入反向阶段。则反向阶段的初始值是前进阶段结束时的瞬时值

【4】以hover为例，若在元素非hover态时设置transition，相当于设置的反向状态。而前进和反向是一致的。而如果在元素hover态设置transition，则前进状态以hover态设置的为准，而反向状态以非hover态设置的为准

.test{ width: 100px; transition: 3s; } .test:hover{ width: 500px; transition: 500ms; }

【5】如果子元素和父元素过渡属性都一致。若触发子元素过渡时，父元素正在过渡，则将父元素过渡的中间态的值作为子元素过渡的初始值

.box:hover{ font-size: 50px; } .test:hover{ font-size: 30px; }

<div > <div >test</div> </div>

【6】若过渡起始值或过渡开始值为auto，则浏览器不会自己计算成具体数字值，而是不发生过渡效果。所以要过渡某些属性，首先需要将其重置成具体数字值

　　[注意]低版本webkit内核浏览器存在bug，会产生反向的过渡效果

.test{ width: 100px; -webkit-transition: width 2s; transition:width 2s; } .test:hover{ width:auto; }

【7】隐式过渡是指一个属性改变时引起另一个属性的改变。如border-width是1em，则font-size改变时，border-width也会相应的改变。firefox和IE浏览器支持隐式过渡。而webkit内核浏览器不支持隐式过渡。 

.test{ border: 1px solid black; -webkit-transition: font-size 2s; transition:font-size 2s; font: 20px/100px ; } .test:hover{ font-size: 40px; border-right-width: 1em; }

 

触发方式

　　一般地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等

【1】hover

　　鼠标悬停触发

【2】active

　　用户单击元素并按住鼠标时触发

【3】focus

　　获得焦点时触发

【4】@media触发

　　符合媒体查询条件时触发

@media (max-width: 1000px){ .test{ width: 500px; } }

【5】点击事件

　　用户点击元素时触发

test.onclick = function(){ test.style.width = ; setTimeout(function(){ test.style.width = ; },3000); }

 

API

　　关于过渡transition的事件只有一个，是transitionend事件，它发生在过渡事件完成后

　　[注意]safari3.1-6、ISO3.2-6.1、android2.1-4.3需要使用webkitTransitionEnd事件

【1】过渡分为两个阶段：前进阶段和反向阶段。transitionend事件在前进阶段结束时会触发，在反向阶段结束时也会触发。

var index = 0; //兼容低版本safari、IOS、android test.addEventListener("webkitTransitionEnd", myFunction); // 标准语法 test.addEventListener("transitionend", myFunction); function myFunction() { index++; this.innerHTML = index; }

【2】过渡事件触发的次数与transition-property过渡属性的个数有关。过渡属性有几个就会触发几次

transition: width 1s,background-color 1s; -webkit-transition: width 1s,background-color 1s;

【3】如果过渡属性是复合属性，如border-width相当于是border-top-width、border-bottom-width、border-left-width和border-right-width这四个属性的集合。则过渡事件触发4次

　　[注意]在低版本webkit内核浏览器里只触发1次

transition:border-width 1s; -webkit-transition: border-width 1s;

【4】如果过渡属性是默认值all，则过渡事件的次数是计算后的非复合的过渡属性的个数。如果发生过渡的属性是border-width和width，则经过计算后过渡事件应该触发5次

　　[注意]在低版本webkit内核浏览器中处理情况也一致

.test{ width: 50px; border: 1px solid black; transition:all 1s; -webkit-transition: all 1s; } .test:hover{ border-width: 10px; width: 100px; }

【5】如果过渡延迟时间为负值，且绝对值大于等于过渡持续时间时，低版本webkit内核浏览器不会产生过渡效果，但会触发过渡事件；而其他浏览器即不会产生过渡效果，也不会触发过渡事件

transition:width 1s -1s; -webkit-transition: width 1s -1s;

【6】如果过渡属性是存在复合属性及该复合属性包含的非复合属性，则浏览器计算复合属性的子属性时，不会重复计算已包含的属性

　　[注意]低版本webkit内核浏览器会出现bug，不仅复合属性被当作一个属性来触发事件，而且会多触发一次