第1種:疑似クラス要素によってトリガーされる
<style>
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
transition: width 1s linear .5s;
}
.box:hover{
width: 400px;
}
</style>
<div class="box">
</div>
2番目の種類:JSによってトリガー
要素のスタイルを変更するには、jsを介して追加する場合、一定の遅延が必要です(遅延により影響はありません)
<style>
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
transition: width 1s linear .5s;
}
.box1{
width: 400px;
}
</style>
<div class="box">
</div>
<scrpit>
setTimeout(() => {
let element = document.getElementsByClassName('box')[0];
element.classList.add('box1')
}, 1)
</scrpit>