34

CSS3 トランジションの終了後に宣言のプロパティを要素に適用するにはどうすればよいですか? 私は次のようなものを持っています:

.something {
  background: blue;
  padding: 10px 0px;
  background-clip: content-box;
  transition: box-shadow 300ms;
}
.something:hover {
  box-shadow: 0px 0px 3px blue;
  padding: 0px;
  margin: 10px 0px;
}

トランジションが 300 ミリ秒で完了した後に、:hover 宣言のパディングとマージンのプロパティを適用したいと思います。

4

3 に答える 3

5

これを実現するには、別の要素を内側または外側に配置.somethingし、パディングとマージン遷移を新しい要素に適用しますが、値を最初の遷移transition-delayの時間以上に設定します。box-shadow

たとえば、次のようになります。

<div class="immediate">
    <div class="later">
        I can haz transitions.
    </div>
</div>

そしてCSS：

.immediate {
  background: #eeb;
  transition: box-shadow 300ms;
}

.immediate:hover {
  box-shadow: 0 0 3px black;
}

.later {
   margin: 0;
   padding: 10px 0;
   transition: all 400ms;
   transition-delay: 300ms;
}

.later:hover {
   margin: 10px 0;
   padding: 0;
}

これによりbox-shadow、300 ミリ秒でトランジションが実行され、その後 400 ミリ秒でトランジションmarginが実行paddingされます (探している効果が必要な場合は、このトランジション時間を 0 に設定できます)。

jsFiddle で試すことができます: http://jsfiddle.net/gTVVk/2/

編集：同じプロパティで異なる遷移を実行する必要がない限り、 Duncan Beattieの答えはうまくいきます。そうでなければ、ネストされた div で物事を過度に複雑にする意味がありません。

于 2013-05-24T08:41:16.717 に答える