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

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

기본적으로 제가 하려는 것은 요소가 클래스를 얻었을 때 CSS 애니메이션을 제공하고, DOM이 렌더링할 때 애니메이션을 재생하지 않고 클래스를 제거했을 때 해당 애니메이션을 되돌리는 것입니다.

Fiddle here: http://jsfiddle.net/bmh5g/

바이올린에서 볼 수 있듯이, "Hover Me" 버튼을 누르면,#item털썩 주저앉다마우스로 호버 버튼을 끄면,#item그냥 사라집니다.나는 되고 싶다.#item(동일한 애니메이션을 사용하지만 반대로) 위로 뒤집습니다.이것이 가능합니까?

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

#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);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>

나는 그것을 가질 것입니다.#item기본적으로 리버스 애니메이션으로 시작합니다.그런 다음 클래스를 추가하여 애니메이션을 표시합니다.#item. http://jsfiddle.net/bmh5g/12/

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

#trigger {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
  margin: 0 0 10px 0;
  background: teal;
  color: white;
  font-family: sans-serif;
}

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

#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);
  }
}

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>

여기에 있는 답변 외에, 당신의 정보를 캐시하세요.$(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>

사용하는 대신 다른 접근 방식display: none페이지 로드 시 클래스가 있는 역방향 애니메이션을 억제한 다음 일반 애니메이션을 적용하는 동일한 이벤트(예: 플립퍼)로 해당 클래스를 제거합니다.그렇게 (http://jsfiddle.net/astrotim/d7omcbrz/1/) :

CSS - 블레이크가 위에 게시한 플리퍼 업 키프레임 외에도

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

jQuery

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

속성을 사용할 수 있습니다.animation-direction동일한 애니메이션을 역방향으로 실행할 수 있습니다.애니메이션을 다시 시작하기 위해 여기에 설명된 여러 방법 중 하나와 이 방법을 결합하면 애니메이션을 다음 시간에 시작할 수 있습니다.mouseenter그 다음에mouseleave다시 시작하고 반대로 재생할 수 있습니다.

저는 jQuery 사용법을 잘 몰라서 기사에 언급된 비jQuery 방법 중 하나를 선택했습니다.

const element_button = document.getElementById('trigger');
const element_item = document.getElementById('item');

element_button.addEventListener("mouseenter", () => {
  if (element_item.classList.contains('animate-backwards')) {
    element_item.classList.remove('animate-backwards');
    void element_item.offsetWidth;
  }
  
  element_item.classList.add('animate-forwards');
});

element_button.addEventListener("mouseleave", () => {
  element_item.classList.remove('animate-forwards');
  void element_item.offsetWidth;
  
  element_item.classList.add('animate-backwards');
});

그리고.

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

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

위 코드에 대한 jsFiddle입니다.

CSS를 사용하여 애니메이션을 다운시키면 클래스를 생성해야 합니다. 예를 들어, .item-up은 반대로 변환을 수행하므로 이전 클래스를 제거하고 항목-up 클래스를 추가하면 애니메이션이 업됩니다.

나는 그것을 위해 당신에게 js fidle을 쓸 것이지만 나는 구문을 충분히 잘 모릅니다.

기본적으로 다음이 필요할 때:

@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 Jake의 제공

MDN의 CSS 솔루션이며 거의 모든 브라우저에서 지원됩니다.

.animation (애니메이션 이름 10s 확장 무한 교대로 실행;)

작업 내용: 요소에 대한 애니메이션 1개(100%부터 0%까지) 반대 방향으로 새 클래스에 대한 애니메이션 1개(0%부터 100%까지) 앞으로 이동그리고 그 수업을 전환하는 것은 효과가 있을 것입니다.

  [1]: https://jsfiddle.net/q7bc4s0f/17/

업데이트: 이렇게 하면 페이지 로드 시 애니메이션이 뒤로 재생됩니다.이 문제를 해결하려면 이벤트 ONCE에서 새 백워드 애니메이션 클래스를 추가한 다음 해당 이벤트에서 애니메이션 클래스를 전환해야 합니다.

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