web-dev-qa-db-ja.com

クラスの削除時にCSSアニメーションを逆にすることは可能ですか？

基本的に私がやろうとしていることは、クラスを取得したときに要素にCSSアニメーションを与え、クラスを削除するときにそのアニメーションを逆にすることですDOMがレンダリングするときにアニメーションを再生せずに 。

ここでフィドル： http://jsfiddle.net/bmh5g/

フィドルでわかるように、「Hover Me」ボタンをホバーすると、#itemはめくります。ホバーボタンをマウスオフすると、#itemが消えます。が欲しいです #item元に戻す（理想的には同じアニメーションを逆に使用する）。これは可能ですか？

HTML：

<div id='trigger'>Hover Me</div>
<div id='item'></div>

CSS：

#item
{
    position: relative;
    height: 100px;
    width: 100px;
    background: red;

    -webkit-transform: perspective(350px) rotateX(-90deg);
    transform: perspective(350px) rotateX(-90deg);
    -webkit-transform-Origin: 50% 0%;
    transform-Origin: 50% 0%;
}

#item.flipped
{
    animation: flipper 0.7s;
    animation-fill-mode: forwards;
    -webkit-animation: flipper 0.7s;
    -webkit-animation-fill-mode: forwards;
}

@keyframes flipper
{
    0% { transform: perspective(350px) rotateX(-90deg); }
    33% { transform: perspective(350px) rotateX(0deg); }
    66% { transform: perspective(350px) rotateX(10deg); }
    100% { transform: perspective(350px) rotateX(0deg); }
}

@-webkit-keyframes flipper
{
    0% { -webkit-transform: perspective(350px) rotateX(-90deg); }
    33% { -webkit-transform: perspective(350px) rotateX(0deg); }
    66% { -webkit-transform: perspective(350px) rotateX(10deg); }
    100% { -webkit-transform: perspective(350px) rotateX(0deg); }
}

Javascript：

$('#trigger').on({
    mouseenter: function(){
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
    }
})
javascriptjqueryhtmlcsscss3
54
Jake

私は#itemデフォルトでは、リバースアニメーションで非表示になります。次に、クラスを追加してアニメーションを与え、#item。 http://jsfiddle.net/bmh5g/12/

jQuery

$('#trigger').on({
    mouseenter: function(){
        $('#item').show();
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
    }
});

[〜＃〜] css [〜＃〜]

#item
{
    position: relative;
    height: 100px;
    width: 100px;
    background: red;
    display: none;
    -webkit-transform: perspective(350px) rotateX(-90deg);
    transform: perspective(350px) rotateX(-90deg);
    -webkit-transform-Origin: 50% 0%;
    transform-Origin: 50% 0%;
    animation: flipperUp 0.7s;
    animation-fill-mode: forwards;
    -webkit-animation: flipperUp 0.7s;
    -webkit-animation-fill-mode: forwards;
}
21
Blake Plumb

display: noneを使用するのではなく、ページの読み込み時にクラスで逆アニメーションを抑制し、通常のアニメーションを適用する同じイベント（たとえば、フリッパー）でそのクラスを削除する方法もあります。そのように（ http://jsfiddle.net/astrotim/d7omcbrz/1/ ）：

CSS-上記のBlakeが投稿したflipperUpキーフレームに加えて

#item.no-animation 
{
  animation: none;
}

jQuery

$('#trigger').on({
    mouseenter: function(){
        $('#item').removeClass('no-animation');
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
    }
})
6
Astrotim

ここでの回答に加えて、$(selector)をキャッシュしてください

したがって、キャッシュするために、_var elements = $(selector);を実行します。

なぜ？！このページの回答にあるコードをそのまま使用すると、DOMに毎回同じ要素コレクション（$('#item')）を要求するためです。 DOM読み取りは高価な操作です。

たとえば、受け入れられた答えは次のようになります。

var item = $('#item');
$('#trigger').on({
    mouseenter: function(){
        item.show();
        item.addClass('flipped');
    },
    mouseleave: function(){
        item.removeClass('flipped');
    }
});

このテキストはすべて書いたので、CSSトランジションを使用してあなたの質問に答えてください

CSSアニメーションの例を求めたのは知っていますが、やりたいアニメーション（カードが開く）では、CSSトランジションを使用して簡単に実現できます。

#item {
  width: 70px;
  height: 70px;
  background-color: black;
  line-height: 1;
  color: white;
}

#item+div {
  width: 70px;
  height: 100px;
  background-color: blue;
  transform: perspective(250px) rotateX(-90deg);
  transform-Origin: 50% 0%;
  transition: transform .25s ease-in-out
}

#item:hover+div {
  transform: perspective(250px) rotateX(0);
}
<div id="item"></div>
<div></div>
3
Kitanga Nday

Cssを使用してアニメーション化するため、アニメーション化するには、クラスを作成する必要があります。逆に変換を行う.item-upの場合、前のクラスを削除してアイテムアップクラスを追加し、アニメーション化する必要がありますそれを。

私はあなたのためにjsフィドルを書くでしょうが、構文を十分によく知りません。

基本的に必要な場合：

@keyframes flipper
@keyframes flipper-up  //This does the opposite of flipper

そして

$('#trigger').on({
    mouseenter: function(){
        $('#item').removeClass('flipped-up');
        $('#item').addClass('flipped');
    },
    mouseleave: function(){
        $('#item').removeClass('flipped');
        $('#item').addClass('flipped-up');
    }
})

jsfiddle.net/bmh5g/ Jakeの厚意により

0
Shane

[〜＃〜] mdn [〜＃〜] からのCSSソリューションで、すべてのブラウザーでほぼサポートされています

.animation（animationName 10s ease-in-out無限の代替の両方が実行中;）

0
B Isaac