it-swarm.com.ru

Можно ли отменить анимацию 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');
    }
})
49
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;
}
20
Blake Plumb

Другой подход, вместо использования display: none, заключается в подавлении обратной анимации с помощью класса при загрузке страницы, а затем в удалении этого класса с тем же событием, которое применяет обычную анимацию (например, flipper). Вот так ( 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');
    }
})
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, который выполняет преобразование в противоположном направлении, чтобы затем вы удалили предыдущий класс и добавили класс 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 любезно предоставлено Джейком

0
Shane

Решение CSS от MDN и практически поддерживается всеми браузерами

.animation (анимация в анимации 10 с бесконечным упрощением и запуском;)

0
B Isaac