css - 为什么 CSS ease 不适用于鼠标移开？

Question

我有一个转换问题，我不知道为什么？

Ease 在鼠标进入时起作用，但在鼠标离开时它只是跳回并且没有 ease out，没有任何反应......

这是我的 CSS 代码:

.wpb_single_image .vc_single_image-wrapper {
  overflow:hidden !important;
  margin-bottom: -6px;
  -webkit-transform: scale(1);
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}

.wpb_single_image .vc_single_image-wrapper img:hover {
  overflow:hidden !important;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}

Answer 1

如果您希望图像上的鼠标移入和鼠标移出期间都发生平滑过渡，则两种状态(未悬停和悬停)都应应用 transition 设置。

在有问题的代码中，img 在悬停时缩放到 1.1 以及过渡，但在悬停时，没有过渡，因为图像 (img) 仅在 hover 选择器适用时(即，仅当鼠标位于图像内时)才获取过渡设置。

为了产生在这个 link 中看到的效果，还应进行以下更改:

• 使包装器与 img 具有相同的高度和宽度(将其设置为 display:inline-block)
• 在父级上设置overflow: hidden。这意味着超过包装原始尺寸的图像部分将被裁剪。

旁白:移除 img 上的 overflow: hidden。这实际上从来都不是必需的，因为 img 不能有子标签，所以 overflow 实际上没有任何效果。

.wpb_single_image .vc_single_image-wrapper {
  display: inline-block;
  overflow: hidden;
  border: 2px solid black; /* Just for demo */
}
.wpb_single_image .vc_single_image-wrapper img {
  margin-bottom: -6px;
  transform: scale(1);
  transition: all 2s ease;
}
.wpb_single_image .vc_single_image-wrapper img:hover {
  transform: scale(1.1);
  /*transition: all 2s ease; no need to mention this as it is same setting as default */
}

<div class='wpb_single_image'>
  <div class='vc_single_image-wrapper'>
    <img src='http://lorempixel.com/100/100/nature/1' />
  </div>
</div>

---

部分原答案:(因评论不适用)

或者，您可以在包装器上应用这两种状态(取决于您的需要)，如以下代码片段所示。

在包装器上应用 :hover 等同于在 img 上应用 :hover 只要包装器和 img 大小相同，包装器和 img 之间没有空格(如填充)。

.wpb_single_image .vc_single_image-wrapper {
  margin-bottom: -6px;
  transform: scale(1);
  transition: all 2s ease;
  overflow: hidden !important;
  display: inline-block; /* this is required because wrapper is by default 100% width */
}
.wpb_single_image .vc_single_image-wrapper:hover {
  transform: scale(1.1);
  /*transition: all 2s ease; no need to mention this as it is same setting as default */
}

<div class='wpb_single_image'>
  <div class='vc_single_image-wrapper'>
    <img src='http://lorempixel.com/100/100/nature/1' />
  </div>
</div>