Question

Firefox在启用转换的元素中关闭动画时有一个很好的行为，它会将元素放在任何位置并转换回原始格式。

在Chrome中，它只会在没有转换的情况下跳转。

为什么不一致？有没有办法在Chrome中复制而不使用太多的JS？

＆＃13;

.wrapper {
  width: 400px;
  height: 200px;
}

.move {
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: #f66;
  transition: 1s;
  cursor: pointer;
}

.move {
  animation: move 2s linear infinite;
}

.wrapper:hover .move {
  animation: none;
}

@keyframes move {
  50% {
    transform: translateX(200px);
  }
}

＆＃13;

<div class="wrapper">
    <div class="move"></div>
</div>

＆＃13;

Answer 1

＆＃13;

$(".spinny").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("spin")  
})

$(".spinny").hover(function(){
  $(this).addClass("spin");        
})

＆＃13;

div {
  width: 100px;
  height: 100px;
  background-color: #f66;
  transition: 1s;
  cursor: pointer;
}

.spin {
  animation: spin 1s linear 1;
}

@keyframes spin {
  100% {
    transform: rotate(180deg);
  }
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.0.js"></script><div class="spinny"></div>

＆＃13;

取自this answer，JS可用于分别在悬停和动画完成时添加和删除类。在这个例子中使用了jQuery，但它不是必需的功能。

编辑：现在没有jQuery，只要记住状态并在每个动画结束后进行检查，它就会播放动画。

＆＃13;

hover = 0;
s = document.getElementById("spinny");
s.addEventListener("animationend", function(){
  s.className = "";
  if (hover)
    setTimeout(function(){s.className = "spin"},0);
})

s.onmouseover = function(){
  s.className = "spin";
  hover = 1;
}

s.onmouseout = function(){
  hover = 0;
}

＆＃13;

div {
  width: 100px;
  height: 100px;
  background-color: #f66;
  transition: 1s;
  cursor: pointer;
}

.spin {
  animation: spin 1s linear 1;
}

@keyframes spin {
  100% {
    transform: rotate(180deg);
  }
}

＆＃13;

<div id="spinny"></div>

＆＃13;

Answer 2

在转换旁边添加转换

.rotate {
  width: 200px;
  height: 200px;
  transform: rotate(0deg);
  transition: 0.5s ease all;
  background-color: #222;
  }
.rotate:hover {
  transform: rotate(20deg);
  transition: 0.5s ease all;
  }

这可以防止它跳跃。

在Chrome与Firefox中从动画过渡到非动画

2 个答案: