css3過渡有幾種觸發(fā)方式

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

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

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

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

transition

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

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div></div>

<p>請把鼠標指針移動到藍色的 div 元素上，就可以看到過渡效果。</p>

<p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>

</body>
</html>

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

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

<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        transition: width 1s linear .5s;
    }
    .box:hover{
        width: 400px;
    }
</style>

<p class="box"></p>

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

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

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

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

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

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

<style>
    .box{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
      transition: width 1s linear .5s;
    }
    .box1{
      width: 400px;
    }
</style>

<p class="box"></p>

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

    }, 1) 
</scrpit>

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

網(wǎng)頁標題：css3過渡有幾種觸發(fā)方式
文章地址：http://chinadenli.net/article22/gsjpcc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、Google、網(wǎng)站策劃、網(wǎng)站排名、軟件開發(fā)、服務器托管

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css3過渡有幾種觸發(fā)方式