CSSトランジションをインラインで適用できますか？

Question

Pseudo Selectorを使用せずにJSインライン（DOM内）を適用したり、JSを使用してdomにプロパティclassを追加したり変更したりすることは可能ですか？ 。

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

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

Answer 1

遷移は、任意の効果をもたらすように変化する値を必要とします。これは、あなたが言及したように、クラスを切り替えるか、または擬似セレクタを使用して通常達成されます。

あなたが任意の変更値なしで起こるためにあなたの「移行」をしたい場合は、アニメーションを使用する必要があります。

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

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

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

私はあなたがこれを行う必要があるだろう、なぜわかりませんインライン。あなたはそれを達成することができますjavascriptのインラインとの組み合わせ

Answer 2

、これを試してみてください：

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

<div id="target" style="transition: all 4s linear;" onclick="this.style.opacity = '.3'">click me</div>