Jquery 可以在删除类时反转css动画吗

发布于08月03日

本质上，我试图做的是，当一个元素获得一个类时，给它一个CSS动画，然后当我移除该类时，反转该动画.

As you can see in the fiddle, when you hover the "Hover Me" button, #item flips down. When you mouseoff the hover button, #item just disappears. I want #item to flip back up (ideally using the same animation but in reverse). Is this possible?

$('#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>

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

Jquery 可以在删除类时反转css动画吗

推荐答案

Jquery相关问答推荐

使用 JQuery 在 span 标签中用逗号分隔页面上的文本

如何在 jquery 中切换 attr()

哪个 JQuery Select 器会排除与给定 Select 器匹配的父项的项目？

动态加载 css 样式表在 IE 上不起作用

使用 JavaScript/jQuery 重定向到 ASP.NET MVC 中的另一个页面

如何使用 jQuery 禁用粘贴(Ctrl+V)？

在范围内设置文本

如何知道所有ajax调用何时完成

从 JQuery.ajax 成功数据中解析 JSON

如何在 JQuery UI 自动完成中使用 source：function()... 和 AJAX

jQuery .hide() 和 .css("display", "none") 的区别

如何获取文档的滚动位置？

如何在 HTML选项标签上显示工具提示？

如何在 Jquery 中将 delay() 与 show() 和 hide() 一起使用

$.each(selector) 和 $(selector).each() 有什么区别

单击后如何禁用提交按钮？

为不同的 node 类型配置jstree右键上下文菜单

jQuery：如果页面底部有外部 JS，为什么要使用 document.ready？

Jquery：如何判断元素是否具有某些 css 类/样式

在ajax请求中检测重定向？