這篇文章將為大家詳細(xì)講解有關(guān)css3過渡有幾種觸發(fā)方式，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都一家集口碑和實力的網(wǎng)站建設(shè)服務(wù)商，擁有專業(yè)的企業(yè)建站團(tuán)隊和靠譜的建站技術(shù)，十載企業(yè)及個人網(wǎng)站建設(shè)經(jīng)驗 ,為成都千余家客戶提供網(wǎng)頁設(shè)計制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營銷型網(wǎng)站建設(shè)，高端網(wǎng)站設(shè)計，同時也為不同行業(yè)的客戶提供成都網(wǎng)站設(shè)計、網(wǎng)站制作的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選成都創(chuàng)新互聯(lián)公司。

css3過渡有2種觸發(fā)方式：1、通過偽類元素觸發(fā)，包括“:hover”、“:focus”、“:checked”等方式；2、通過JS觸發(fā)，使用js或Jquery代碼修改CSS屬性，進(jìn)而觸發(fā)transition的漸變。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

transition

??transition是CSS3最簡單的動畫, 當(dāng)元素的屬性發(fā)生改變能夠以漸變的方式呈現(xiàn)出來; 如下代碼是w3c上的一個示例, 加上了transition的結(jié)果就是在hover時, 長度會逐步增加到300px.

請把鼠標(biāo)指針移動到藍(lán)色的 div 元素上，就可以看到過渡效果。

注釋：本例在 Internet Explorer 中無效。

css3過渡的觸發(fā)方式

第一種： 通過偽類元素觸發(fā)，包括hover、focus、checked等方式

但是實際使用當(dāng)中我們更多的是使用JS或者Jquery直接修改屬性, 但是工作中發(fā)現(xiàn)這樣不行。

第二種： 通過JS觸發(fā)

如果使用JS或者Jquery直接修改CSS屬性

JS觸發(fā)方式應(yīng)當(dāng)是它的class發(fā)生改變以至于能夠得到新的樣式。

我的理解是必須元素發(fā)生什么改變使得它有了一些不同從而獲取到一些新的屬性，對于偽類觸發(fā)是這樣，對于JS觸發(fā)方式應(yīng)當(dāng)是它的class發(fā)生改變以至于能夠得到新的樣式。

通過給p添加newclass的類使得p發(fā)生改變獲取到該類， 能夠觸發(fā)transition的漸變。

    setTimeout(() => {
      let element = document.getElementsByClassName('box')[0];
      element.classList.add('box1')

    }, 1) 

關(guān)于“css3過渡有幾種觸發(fā)方式”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。