80

本质上，我要做的是在元素获得类时给它一个 CSS 动画，然后在我删除类时反转该动画而不在 DOM 呈现时播放动画。

在这里小提琴：http: //jsfiddle.net/bmh5g/

正如您在小提琴中看到的那样，当您悬停“悬停我”按钮时，#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>

4

7 回答 7

27

默认情况下，我会#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>

于 2013-08-02T19:02:17.567 回答
9

另一种方法，而不是使用display: none，是在页面加载时使用一个类来抑制反向动画，然后使用应用正常动画的相同事件删除该类（例如：flipper）。像这样（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');
    }
})
于 2014-10-01T23:47:38.943 回答
7

除了这里的答案，请缓存您的$(selector)

所以你几乎这样做是var elements = $(selector);为了缓存。

为什么？！因为如果您按原样使用本页答案中的代码，您将$('#item')每次都向 DOM 询问相同的元素集合 ( )。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>

于 2018-08-10T17:18:33.897 回答
0

它使用 css 进行动画处理，因此要使其动画化，您需要创建一个类，例如 .item-up ，它会进行相反的转换，因此您将删除前一个类并添加 item-up 类，这应该动画它了。

我会为它写一个 js fiddle，但我不太了解语法。

基本上当你需要：

@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 由杰克提供

于 2013-08-02T18:41:05.053 回答
0

您可以使用该属性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 。

于 2020-10-08T13:29:09.350 回答
-1

来自MDN的CSS 解决方案，几乎所有浏览器都支持

.animation(animationName 10s ease-in-out 无限交替运行;)

于 2018-04-25T18:16:51.127 回答
-2

对我有用：元素的 1 个反向动画（从 100% 到 0%） 新类的 1 个单独的动画正向（从 0% 到 100%）并且切换该类将起作用

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

Upd：这样动画将在页面加载时向后播放。要解决这个问题，您必须在事件 ONCE 上添加新的 bacwards 动画类，然后在该事件上切换动画类。

于 2022-01-25T12:14:35.087 回答