클래스 제거시 CSS 애니메이션을 되돌릴 수 있습니까?

클래스 제거시 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); }
}

자바 스크립트 :

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

---

나는 것 #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;
}

---

를 사용하는 것보다 다른 방법 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');
    }
})

---

여기에있는 답변 외에도 $(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 전환을 사용하여 질문에 대답하는 것이 좋습니다.

I know you asked for a CSS animations example, but for the animation you wanted to do (a card flipping open), it can be easily achieved using CSS transitions:

#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>

---

Its animating down using css so to get it to animate up you need to create a class, say .item-up that does the transformation in the opposite so then you would remove the previous class and add the item-up class and that should animate it up.

I would write you a js fiddle for it but I dont know the syntax well enough.

Basically when you will need:

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

and

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

jsfiddle.net/bmh5g/3 courtesy of Jake

---

CSS solution from MDN and almost supported by all browser

.animation(animationName 10s ease-in-out infinite alternate both running;)

ReferenceURL : https://stackoverflow.com/questions/18023859/possible-to-reverse-a-css-animation-on-class-removal