2

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitionsを読みました。

以下に簡単な例を示します。

<div class="box"></div>

およびCSS:

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    -o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
}

マウスを移動してボックスをホバーすると、.box(初期状態) から.box:hover(最終状態) への遷移など、期待どおりに遷移が実行されます。ただし、ボックスの外にマウスを移動すると、トランジションは逆に実行されます (例: から.box:hoverへ) .box。

私の質問は、初期状態または最終状態で CSS トランジション プロパティを設定することですか? 仕様はこの問題を明確にしていますか?

4

1 に答える 1

2

transition-*遷移の「順方向」または「逆方向」のいずれかの状態でプロパティを指定できます。前者だけでなくても構いません。transition モジュールの種類は、これをほのめかしています:

作成者は、遷移をトリガーする値を指定する同じルールで「transition-duration」、「transition-timing-function」、または「transition-delay」の値を指定できます。または、これらのプロパティを同時に変更することもできます。遷移をトリガーするプロパティを変更します。トランジションに影響を与えるのはこれらの「transition-*」プロパティの新しい値であるため、これらの値は、関連付けられたトランジション値へのトランジションに使用されます。

以下の例ではtransition-duration、:hover4 を指定しましたが、マウスを離すとすぐに、例で指定した 1 の値に戻ることに気付くでしょう。他の動的疑似クラスにも同じルールを適用できます。

http://jsfiddle.net/BZeQW/1/

于 2013-08-13T11:59:32.480 に答える