悬停离开动画

Question

当我们在元素上应用悬停效果时（例如悬停时具有盒子阴影的 div），过渡为 1s。 悬停时会出现动画，但是一旦您将鼠标移开，它就没有过渡，只是急剧返回状态。

当我们离开悬停状态时，你如何给出类似 1s 的转换？

我看到了一些代码，但看不出是什么原因造成的。

div {
  width: 50px;
  height: 50px;
  background: purple;
}

div:hover {
  animation: nav 1s linear forwards;
}
@keyframes nav {
  to {
    box-shadow: 5px 5px 2px black;
  }
}

<div></div>

Answer 1

你不应该做任何事情。当您停止悬停时，它会转回。

div {
  width: 50px;
  height: 50px;
  background: purple;
  transition: box-shadow 1s;
}

div:hover {
   box-shadow: 5px 5px 2px black;
}

<div></div>

Answer 2

我在上面看到了一个正确的答案，但这是 JavaScript 使用 mouseover 和 mouseleave 事件的另一个解决方案，但我注意到您使用 .hover，因为它很简单。

div {
  width: 50px;
  height: 50px;
  background: purple;
  transition: all 1s;
}

    <div id="d"></div>

const d = document.getElementById("d");
d.addEventListener("mouseover",()=>{
   d.style.boxShadow = "5px 5px 2px black";
})
d.addEventListener("mouseleave",()=>{
   d.style.boxShadow = "0px 0px 0px";
})

Answer 3

除了其他答案，您还可以执行以下操作（非 JS/jQuery）：

HTML：

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

CSS：

body {
  background: #CCC;
}
.box {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: all 0.3s ease-in-out;
}

/* Create the hidden pseudo-element */
/* include the shadow for the end state */
.box::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease-in-out;
}

.box:hover::after {
    opacity: 1;
}

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