是否可以在線應用CSS轉換？

是否可以在不使用僞選擇器或使用JS來添加和更改dom上的屬性class的情況下，內聯應用CSS轉換（在DOM中）？。是否可以在線應用CSS轉換？

#target{ 
 
    width: 100px; 
 
    height:100px; 
 
    background-color:red; 
 
}

<div id="target" style="transition: opacity 1s linear;"></div>

來源

2016-11-24 Radex

是的，我們能做到。但是，僅僅因爲你可以不意味着你應該;-) –

轉換需要變更值，以產生任何影響。正如你所提到的，這通常是通過切換一個類或使用僞選擇器來實現的。

如果你希望你的「轉型」，沒有任何改變價值觀念發生，你需要使用一個動畫：

#target{ 
 
    width: 100px; 
 
    height:100px; 
 
    background-color:red; 
 
} 
 

 
@keyframes fadeMe { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
}

<div id="target" style="animation: fadeMe 2s;"></div>

我不知道你爲什麼會需要這樣做盡管如此。

來源

2016-11-24 11:22:36 Turnip

這樣做的一個很好的理由是剪切和粘貼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>

來源

2016-11-24 11:35:43 RizkiDPrast

，爲什麼只有內聯javascript工作？ –

它似乎適用於任何類型的DOM更新，不僅限於內嵌JavaScript。我剛剛使用ReactJS驗證了在Chrome中使用的轉換，以更新render（）方法中的內聯樣式。我不知道是否有限制。 – Eloff

是否可以在線應用CSS轉換？

回答

相關問題