Можно ли отменить анимацию css при удалении класса?

По сути, я пытаюсь сделать элемент анимацией CSS, когда он получает класс, а затем отменил эту анимацию, когда я удаляю класс без воспроизведения анимации, когда DOM отображает.

Заклинание здесь: http://jsfiddle.net/bmh5g/

Как вы можете видеть на скрипке, когда вы наведете кнопку "Наведите на меня", #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');
    }
})

Ответы

Ответ 1

Я бы отключил #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;
}

Ответ 2

Другой подход, а не использование display: none, заключается в подавлении обратной анимации с классом при загрузке страницы, а затем удалении этого класса с тем же событием, которое применяет нормальную анимацию (например, флиппер). Так (http://jsfiddle.net/astrotim/d7omcbrz/1/):

CSS - в дополнение к ключевому кадру flipperUp, опубликованному Блейком выше

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

jQuery

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

Ответ 3

Анимируя его с помощью css, чтобы его оживить, вам нужно создать класс, например .item-up, который делает преобразование в обратном, поэтому вы должны удалить предыдущий класс и добавить класс 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/3 любезно предоставлено Джейком