資訊專欄INFORMATION COLUMN
摘要：離開時效果生硬由于元素只有在偽類觸發(fā)的時候，效果才能加到元素上。簡單解決在此處留一個就夠了去掉這個這只是最簡單的動畫實現(xiàn)，但對于目前大部分需求來說，配合配合貝塞爾曲線，已經(jīng)足夠用了。
由于hover偽類添加的動畫效果，僅當(dāng)鼠標(biāo)放在元素上時會被觸發(fā)，而當(dāng)鼠標(biāo)離開時，效果會中斷，會顯得很生硬。
大多數(shù)人的想法都是使用js的onmouseover和onmouseleave事件來實現(xiàn)動畫效果。其實不必這么麻煩，CSS3便可以幫你解決這些問題。
離開時效果生硬
由于div元素只有在:hover偽類觸發(fā)的時候，效果才能加到div元素上。
當(dāng)鼠標(biāo)離開div元素的時候，:hover偽類將不再生效，瞬間丟掉hover里寫的動畫效果。
此時，我們應(yīng)當(dāng)在原本元素上再寫一個一模一樣的transition效果，將離開斷掉的動畫效果續(xù)接上。
簡單解決
此時，不管鼠標(biāo)在什么時候離開元素，都會原樣返回。
但此時會有一個問題，鼠標(biāo)放上去，立馬離開，或者鼠標(biāo)從上邊勻速劃過，div回到原樣的時間，依舊是1s。
其實，我們在hover里寫的transition:all 1s linear完全是多余的。
transition有一個特性，只要是帶有數(shù)值類型的屬性（例如：% , rgba() , rgb() , hsla() , 數(shù)字等），在其發(fā)生變化的時候，均會被觸發(fā)動畫效果。
因此，不管:hover偽類什么時候丟掉我的動畫，也不管我:hover時，元素動畫走到了什么地步。只要元素本身帶有transitioin，該動畫便會從當(dāng)前動畫執(zhí)行到的地方，以相同的時間返回原樣。
簡單解決
這只是最簡單的動畫實現(xiàn)，但對于目前大部分需求來說，配合配合貝塞爾曲線，已經(jīng)足夠用了。
你僅僅需要做到，hover中的最終樣式，保證為數(shù)值樣式變OK了。
像display:block變?yōu)閐isplay:none就不好使了，此時我們可以用visibilty:1變?yōu)関isibilty:0，同樣也可以簡單實現(xiàn)顯示到隱藏的效果。
另外加一句，不太清楚transition屬性的可以自行去百度去，transition-timing-function屬性定義的速度曲線，使用cubic-bezier貝塞爾曲線，可以做到很多效果，大家可以上這個網(wǎng)址去試一試貝塞爾曲線實現(xiàn)的動畫。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/87170.html
摘要：離開時效果生硬由于元素只有在偽類觸發(fā)的時候，效果才能加到元素上。簡單解決在此處留一個就夠了去掉這個這只是最簡單的動畫實現(xiàn)，但對于目前大部分需求來說，配合配合貝塞爾曲線，已經(jīng)足夠用了。 由于hover偽類添加的動畫效果，僅當(dāng)鼠標(biāo)放在元素上時會被觸發(fā)，而當(dāng)鼠標(biāo)離開時，效果會中斷，會顯得很生硬。 大多數(shù)人的想法都是使用js的onmouseover和onmouseleave事件來實...
摘要：鼠標(biāo)移動觸發(fā)的動畫效果。第二個參數(shù)就是動畫耗時，默認(rèn)是，所以必不可少，要不然沒有動畫效果，沒什么可說的。多個樣式各個樣式用逗號隔開即可寬度完成變化，高度延遲執(zhí)行，完成變化，背景色完成變化效果如下未完待續(xù)1.transition的瀏覽器支持情況 IE10+支持，IE6789都不支持！目前，其他瀏覽器最新版本都支持，不需要再加前綴-webkit- 之類的了 2. 還是一步一步說說怎么用trans...
摘要：的新特性大致分為以下六類選擇器邊框與圓角背景與漸變過渡變換動畫下面分別說一說以上六類都有哪些內(nèi)容選擇器基本選擇器基本選擇器又分為子選擇器相鄰兄弟選擇器通用兄弟選擇器群組選擇器屬性選擇器為帶有屬性的元素設(shè)置樣式為屬性的元素設(shè)置樣式選擇屬性值包 CSS3的新特性大致分為以下六類 1.CSS3選擇器 2.CSS3邊框與圓角 3.CSS3背景與漸變 4.CSS3過渡 5.CSS3變換 ...
閱讀 3255·2021-09-23 11:55
閱讀 2587·2021-09-13 10:33
閱讀 1656·2019-08-30 15:54
閱讀 3085·2019-08-30 15:54
閱讀 2357·2019-08-30 10:59
閱讀 2361·2019-08-29 17:08
閱讀 1793·2019-08-29 13:16
閱讀 3582·2019-08-26 12:25
