Apakah kaedah pencetus untuk peralihan css3?-Soal Jawab bahagian hadapan-php.cn

Apakah kaedah pencetus untuk peralihan css3?

青灯夜游

Lepaskan： 2021-12-15 11:20:19

asal

2817 orang telah melayarinya

Terdapat dua kaedah pencetus untuk peralihan css3: 1. Dicetuskan oleh unsur kelas pseudo, termasuk ":hover", ":focus", ":checked", dsb.; js atau Jquery Kod mengubah suai sifat CSS dan mencetuskan kecerunan peralihan.

Apakah kaedah pencetus untuk peralihan css3?

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

peralihan

peralihan ialah animasi paling mudah dalam CSS3 Apabila sifat sesuatu elemen berubah, ia boleh ditunjukkan dalam kecerunan kod berikut w3c. Hasil daripada menambahkan peralihan ialah apabila melayang, panjangnya akan meningkat secara beransur-ansur kepada 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>

Salin selepas log masuk

Kaedah mencetuskan peralihan css3

kaedah pertama : Dicetuskan melalui elemen kelas pseudo, termasuk tuding, fokus, diperiksa, dsb.

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

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

Salin selepas log masuk

Walau bagaimanapun, dalam penggunaan sebenar, kami kebanyakannya menggunakan JS atau Jquery untuk mengubah suai atribut secara langsung, tetapi kami mendapati bahawa ini tidak berfungsi.

Kedua: Dicetuskan oleh JS

Jika anda menggunakan JS atau Jquery untuk mengubah suai sifat CSS secara langsung

Kaedah pencetus JS hendaklah kelasnya berubah Supaya gaya baru boleh diperolehi.

Pemahaman saya ialah elemen mesti diubah untuk menjadikannya berbeza supaya ia boleh memperoleh beberapa atribut baharu untuk pencetus kelas pseudo, perkara ini berlaku untuk pencetus JS, kelasnya harus berubah supaya ia boleh Dapatkan gaya baharu.

Dengan menambahkan kelas baharu pada p, menyebabkan p berubah dan memperoleh kelas, kecerunan peralihan boleh dicetuskan.

<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>

Salin selepas log masuk

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah kaedah pencetus untuk peralihan css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!