Css tranistions允許元素的屬性在單位時(shí)間內(nèi)發(fā)生平滑的過渡，在閱讀完《CSS Transitions Module Level 3》之后，我已經(jīng)被其所吸引。盡管目前只有chrome和safari瀏覽器支持該屬性(不過目前還得使用-webkit內(nèi)核關(guān)鍵字作為前綴)，但相信在不久的將來，各主流瀏覽器會(huì)全面支持該屬性。
通常情況下，當(dāng)css屬性發(fā)生改變時(shí)，元素會(huì)立刻發(fā)生改變。Css transtions提供一種方法使得元素從原始狀態(tài)平滑的過渡到新的狀態(tài)。只需要對(duì)元素定義要使用transition效果的屬性(transition-property)、transition效果的過渡時(shí)間(transition-duration)、transition效果的過渡方式(transition-timing-function)以及transition效果何時(shí)開始(transition-delay)。在詳細(xì)了解這些屬性之后，我作了一個(gè)簡單的測(cè)試(如下)，雖說簡單，但總能鼓動(dòng)人心。
提示：可修改后代碼再運(yùn)行!
我只是定義一個(gè)絕對(duì)居中的盒子，在鼠標(biāo)滑過時(shí)將其放大，在chrome中我們會(huì)看到平滑的過渡效果。Css規(guī)則如下：
在-webkit-transition-property定義了使用過渡效果的屬性，-webkit-transition-duration定義過渡持續(xù)的時(shí)間，這里我定義的1s。W3c的規(guī)則中說明，當(dāng)把-webkit-transition-duration的屬性值定義為0時(shí)，將不會(huì)出現(xiàn)平滑的過渡。-webkit-transition-timing-function定義了過渡的方式，這里是ease-in-out，關(guān)于其它方式，可以參看文檔說明。有了這樣一個(gè)屬性之后，用戶可以得到良好的體驗(yàn)，我們也不必要在為實(shí)現(xiàn)這樣的平滑的效果而去寫大量的js。下面我構(gòu)建一個(gè)Image gallery，來看看該屬性所帶來的用戶體驗(yàn)。
如何排列圖片，我不贅述。熟悉css的人都很清楚怎么做，我只介紹實(shí)現(xiàn)transition效果的核心css代碼。
在-webkit-transition-property定義了使用過渡效果的屬性，-webkit-transition-duration定義過渡持續(xù)的時(shí)間，這里我定義的1s。W3c的規(guī)則中說明，當(dāng)把-webkit-transition-duration的屬性值定義為0時(shí)，將不會(huì)出現(xiàn)平滑的過渡。-webkit-transition-timing-function定義了過渡的方式，這里是ease-in-out，關(guān)于其它方式，可以參看文檔說明。有了這樣一個(gè)屬性之后，用戶可以得到良好的體驗(yàn)，我們也不必要在為實(shí)現(xiàn)這樣的平滑的效果而去寫大量的js。下面我構(gòu)建一個(gè)Image gallery，來看看該屬性所帶來的用戶體驗(yàn)。
如何排列圖片，我不贅述。熟悉css的人都很清楚怎么做，我只介紹實(shí)現(xiàn)transition效果的核心css代碼。
上面的.imageGallery li a:hover那行代碼以及.imageGallery li的overflow屬性，主要修復(fù)IE6下的bug。給imageGallery li定義overflow:hidden，可以看到很有趣的效果。
看看最終結(jié)果，可以看到，我們?cè)僖膊槐貫檫@樣一個(gè)平滑的過渡效果而去寫大量的js了，期待css transition能很快得到主流瀏覽器的支持。
最終結(jié)果：
提示：可修改后代碼再運(yùn)行!
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
