Rumah > Artikel > hujung hadapan web > Apakah kaedah pencetus untuk peralihan css3?
Apakah kaedah pencetus untuk peralihan css3?
- 青灯夜游asal
- 2021-12-15 11:20:192786semak imbas
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.
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>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>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('box')[0];
element.classList.add('box1')
}, 1)
</scrpit>(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!