悬停在元素上时如何进行完整过渡？

Question

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: all 1s ease-in-out;
}
.box:hover {
  background: yellow;
}

<div class="box"></div>

如果光标在 .box 上停留的时间少于一秒，则过渡停止并返回到其原始阶段。 有没有办法以某种方式强制整个动画，而不考虑悬停持续时间？

fiddle

Answer 1

我认为您很乐意为此使用 JS。首先你需要为背景变化创建动画，然后你可以将其设置为类并在悬停时添加该类，并在动画结束或webkitAnimationEnd时将其删除。

$('.box').hover(function() {
  $(this).addClass('animate');
  $(this).on('webkitAnimationEnd', function() {
    $(this).removeClass('animate');
  })
})

.box {
  width: 100px;
  height: 100px;
  background: red;
  display: inline-block;
  margin: 10px;
}
.box.animate {
  animation: changeColor 2s linear;
}
@keyframes changeColor {
  0% {
    background: red;
  }
  50% {
    background: yellow;
  }
  100% {
    background: red;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>

Answer 2

我认为如果没有 javascript，您将无法做到这一点，但发现会很有趣。

轻量级 javascript 解决方案可能是这样的：

// Get the elemnt
var myDiv = document.getElementById('box');

// Detect hover
myDiv.onmouseover = function() { 
  // Add a force class to the element
  myDiv.className += " force";
  // Reset the cass name after 1sec (100ms)
  setTimeout(function(){ myDiv.className = "box"; }, 1000, myDiv);
}

稍微改变你的标记，让事情变得更容易：

<div id="box" class="box"></div>

并为您的 css 样式添加一个额外的类以及悬停状态：

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: all 1s ease-in-out;
}

.box.force,
.box:hover {
  background: yellow;
}

查看jsfiddle

Answer 3

编辑：类似的解决方案，但依赖于过渡和动画：https://jsfiddle.net/ok7pnrsL/

---

这是我的解决方案：https://jsfiddle.net/9yu0cozq/1/

基本上你需要为盒子添加一个容器，然后播放 CSS 动画。

<div id="container">
    <div class="box"></div>
</div>

当鼠标进入 .box 时，隐藏的容器会出现（请注意，要使其正常工作，该容器应具有足够的宽度和高度以适应鼠标可能移动的整个区域）。 该容器为自己创建一个动画，以便在 1 秒内“隐藏”回来。并且在显示的同时 .box 有一个动画。

#container {
    position:absolute;
    z-index:1;
    width: 0;
    height: 0;
}
#container:hover{
    animation-name:changeSize;
    animation-duration: 1s;
}
#container:hover .box{
    animation-name:changeColor;
    animation-duration: 1s;
}
.box {
    z-index:0;
    position:absolute;
    width: 100px;
    height: 100px;
    background: red;
    transition:1s background;
}
.box:hover {
    background: yellow;
}
@keyframes changeColor {
    0% {
    background: red;
    }
    100% {
    background: yellow;
    }
}
@keyframes changeSize {
    0%,99% {
    width: 100%;height: 100%;
    }
    100% {
    width: 0;height: 0;
    }
}

因此，在不了解真实上下文的情况下，此解决方案提供了一系列可能符合或可能不符合您的确切情况的假设，但给出了如何使用纯 CSS 解决它的想法。