css - 悬停时意外延迟

Question

当我将鼠标悬停时，过渡会立即开始，但当我将鼠标悬停时，它可能会等待 300 毫秒才开始反向过渡。 ( https://jsfiddle.net/vawpnrL9/1/ )

<div id="isa-hover-gallery">

<a href="https://febc.org/indonesia">
<div class="isa-image" style="background-image:url('https://febc2017.wpengine.com/wp-content/plugins/justified-image-grid/timthumb.php?src=https%3A%2F%2Ffebc2017.wpengine.com%2Fwp-content%2Fuploads%2FEmail-1-Pakistan-Listener-Story_banner-image-900x600.jpg&h=560&w=798&q=45&f=.jpg')">
<div class="slide-text">
<p><b>Sharing His Faith in Pakistan</b></p>
<p>Anam* was given an extraordinary opportunity after he came to faith in Christ…He was asked to preach from the Bible in the mosque his father ran…</p>
</div>
</div>
</a>

</div>

---

#isa-hover-gallery {
  display: flex;
  flex-wrap: wrap;
}
#isa-hover-gallery .isa-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 215px;
  min-width: 320px;
  margin: 0 24px 24px 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}
#isa-hover-gallery .isa-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0);
  transition: 300ms ease-in;
}
#isa-hover-gallery .isa-image > span {
  position: relative;
  z-index: 11;
  opacity: 0;
  color: #ffffff;
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  transition: 300ms ease-in;
}
#isa-hover-gallery .isa-image .slide-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 4px 6px;
  background-color: rgba(0,0,0,0.8);
  color: #ffffff;
  z-index: 11;
}
#isa-hover-gallery .isa-image .slide-text p:first-child {
  padding-bottom: 0;
}
#isa-hover-gallery .isa-image .slide-text p:last-child {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  transition: 600ms ease-in;
}
#isa-hover-gallery .isa-image:hover::after {
 background-color: rgba(0,0,0,0.6);
}
#isa-hover-gallery .isa-image:hover > span {
  opacity: 1;
}
#isa-hover-gallery .isa-image:hover .slide-text p:last-child {
  max-height: 1000px;
  margin: auto;
  padding: auto;
}

我尝试了不同的过渡速度并在其他元素上禁用过渡，但没有任何帮助。

Answer 1

这是因为您正在为 max-height 设置动画，并且为它设置了很大的值，因此您可以通过将 max-height 降低到较低的值来控制它:

#isa-hover-gallery {
  display: flex;
  flex-wrap: wrap;
}

#isa-hover-gallery .isa-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 215px;
  min-width: 320px;
  margin: 0 24px 24px 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

#isa-hover-gallery .isa-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: 300ms ease-in;
}

#isa-hover-gallery .isa-image>span {
  position: relative;
  z-index: 11;
  opacity: 0;
  color: #ffffff;
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  transition: 300ms ease-in;
}

#isa-hover-gallery .isa-image .slide-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right:0;
  padding: 4px 6px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  z-index: 11;
}

#isa-hover-gallery .isa-image .slide-text p:first-child {
  padding-bottom: 0;
}

#isa-hover-gallery .isa-image .slide-text p:last-child {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  transition: 600ms ease-in;
}

#isa-hover-gallery .isa-image:hover::after {
  background-color: rgba(0, 0, 0, 0.6);
}

#isa-hover-gallery .isa-image:hover>span {
  opacity: 1;
}

#isa-hover-gallery .isa-image:hover .slide-text p:last-child {
  max-height: 100px;
  margin: auto;
  padding: auto;
}

<div id="isa-hover-gallery">

  <a href="https://febc.org/indonesia">
    <div class="isa-image" style="background-image:url('https://febc2017.wpengine.com/wp-content/plugins/justified-image-grid/timthumb.php?src=https%3A%2F%2Ffebc2017.wpengine.com%2Fwp-content%2Fuploads%2FEmail-1-Pakistan-Listener-Story_banner-image-900x600.jpg&h=560&w=798&q=45&f=.jpg')">
      <div class="slide-text">
        <p><b>Sharing His Faith in Pakistan</b></p>
        <p>Anam* was given an extraordinary opportunity after he came to faith in Christ…He was asked to preach from the Bible in the mosque his father ran…</p>
      </div>
    </div>
  </a>

</div>