По сути, я пытаюсь сделать элемент анимацией 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');
}
})