1

ボタンをクリックしたときに、ボタンのcolorとを変更するだけです。background-color

<input type="button" value="click me" id="myButton" onclick="ChangeColor()"/>

このボタンのCSScolorにはとのCSSトランジションが含まれていますがbackground-color、:hover疑似要素ではスタイルを追加せず、色も変更しませんでした。

#myButton{
     color:#3399FF;
     background-color:#FFFFFF;
     /* These transitions are supposed to change the color in case I hover over the button */
     -webkit-transition: background 0.5s,color 0.5s;
        -moz-transition: background 0.5s,color 0.5s;
            transition: background 0.5s,color 0.5s;
}
#myButton:hover{
     /* But since there's nothing here, the color won't change when I hover */
}

さて、JavaScriptでスタイルを変更すると、トランジションを使用しているときにスタイルが変更されます。つまり、色は0.5sすぐにではなく、後に変更されます。

function ChangeColor()
{
   document.getElementById("myButton").style.color = "#FFFFFF";
   document.getElementById("myButton").style.backgroundColor = "#3399FF";
}

これは本当に良いことで、私はそれが好きですが、JavaScriptはCSS3トランジションをどのように尊重するのでしょうか。これに関するドキュメントはありますか？

4

2 に答える 2

3

プロパティの値が変更されるたびに、遷移が適用されます。ホバー、フォーカス、サイズ変更（メディアクエリなど）、クリック、またはJavaScriptを介したその他のイベントで変更するかどうかは関係ありません。

一般に、要素の2つの状態の間で遷移があります。最初に初期状態を定義します。

#myButton {
     color: #39f;
     background: #fff;
     transition: .5s;
}

:hoverこれらの2つのプロパティのいずれかの値を変更すると（疑似クラスとJavaScriptのどちらを使用してこれを行うかは関係ありません）、要素は別の状態になり、次の値の間で遷移が発生します。初期状態のプロパティとこの新しい状態のプロパティ。

于 2013-03-15T23:55:42.517 に答える
2

JavaScriptでスタイルを変更するために使用しているメソッドは、基本的に、要素自体の属性を手動でstyle直接変更する方法です。スタイルが別のスタイルに変更され、そのトランジションが定義されている場合は常に、そのトランジションがアクティブになり、新しいスタイルに変更されます。これには、JavaScriptがスタイルに加える変更が含まれます。

于 2013-03-15T23:55:19.513 に答える