是否可以在不使用僞選擇器或使用JS來添加和更改dom上的屬性class
的情況下,內聯應用CSS轉換(在DOM中)? 。 是否可以在線應用CSS轉換?
#target{
width: 100px;
height:100px;
background-color:red;
}
<div id="target" style="transition: opacity 1s linear;"></div>
是否可以在不使用僞選擇器或使用JS來添加和更改dom上的屬性class
的情況下,內聯應用CSS轉換(在DOM中)? 。 是否可以在線應用CSS轉換?
#target{
width: 100px;
height:100px;
background-color:red;
}
<div id="target" style="transition: opacity 1s linear;"></div>
轉換需要變更值,以產生任何影響。正如你所提到的,這通常是通過切換一個類或使用僞選擇器來實現的。
如果你希望你的「轉型」,沒有任何改變價值觀念發生,你需要使用一個動畫:
#target{
width: 100px;
height:100px;
background-color:red;
}
@keyframes fadeMe {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div id="target" style="animation: fadeMe 2s;"></div>
我不知道你爲什麼會需要這樣做盡管如此。
這樣做的一個很好的理由是剪切和粘貼HTML(例如,提供內聯廣告)。 – Sablefoste
與內嵌的JavaScript就可以實現這個結合,試試這個:
#target{
width: 100px;
height:100px;
background-color:red;
}
<div id="target" style="transition: all 4s linear;" onclick="this.style.opacity = '.3'">click me</div>
,爲什麼只有內聯javascript工作? –
它似乎適用於任何類型的DOM更新,不僅限於內嵌JavaScript。我剛剛使用ReactJS驗證了在Chrome中使用的轉換,以更新render()方法中的內聯樣式。我不知道是否有限制。 – Eloff
是的,我們能做到。但是,僅僅因爲你可以不意味着你應該;-) –