css3過渡有哪些觸發方式

青灯夜游原創: 2021-12-15 11:20:192827瀏覽

css3過渡有2種觸發方式：1、透過偽類元素觸發，包括「:hover」、「:focus」、「:checked」等方式；2、透過JS觸發，使用js或Jquery程式碼修改CSS屬性，進而觸發transition的漸進。

css3過渡有哪些觸發方式

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

transition

transition是CSS3最簡單的動畫, 當元素的屬性發生改變能夠以漸變的方式呈現出來; 如下程式碼是w3c上的一個範例,加上了transition的結果就是在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過渡的觸發方式

##第一種：通過偽類元素觸發，包括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直接修改屬性, 但是工作中發現這樣不行。

第二種：透過JS觸發

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

JS觸發方式應當是它的class改變以至於能夠得到新的樣式。

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

透過為p添加newclass的類別使得p發生改變取得到該類，能夠觸發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(&#39;box&#39;)[0];
      element.classList.add(&#39;box1&#39;)

    }, 1) 
</scrpit>

（學習影片分享：

css影片教學）

以上是css3過渡有哪些觸發方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 jquery css css3 class JS 伪类 transition

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css3定位有幾種下一篇：css3定位有幾種

看更多