用延迟问题逆转过渡

Question

请考虑以下转换：

function toggle() {
  var element = document.querySelector('.sr-block-left');
  element.classList.toggle("sr-visible");
}

[class^=sr-block-],
[class*=" sr-block-"] {
  position: relative;
  --block-color: #ccc;
  --animation-speed: 200ms;
}
[class^=sr-block-] > .sr-block,
[class*=" sr-block-"] > .sr-block {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  transition: transform var(--animation-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[class^=sr-block-].sr-block-left.sr-visible > .sr-block,
[class*=" sr-block-"].sr-block-left.sr-visible > .sr-block {
  transform: scaleX(1);
}
[class^=sr-block-] > .sr-block:before,
[class*=" sr-block-"] > .sr-block:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--block-color);
  will-change: transform;
  transition: transform var(--animation-speed) calc(var(--animation-speed) + 200ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[class^=sr-block-].sr-block-left.sr-visible > .sr-block:before,
[class*=" sr-block-"].sr-block-left.sr-visible > .sr-block:before {
  transform: scaleX(0);
  transform-origin: right;
}
[class^=sr-block-].sr-block-left > .sr-block,
[class*=" sr-block-"].sr-block-left > .sr-block {
  transform: scaleX(0);
  transform-origin: left;
}
[class^=sr-block-] > .sr-block-content,
[class*=" sr-block-"] > .sr-block-content {
  opacity: 0;
  transition: opacity 0s calc(var(--animation-speed) + 200ms);
}
[class^=sr-block-].sr-visible > .sr-block-content,
[class*=" sr-block-"].sr-visible > .sr-block-content {
  opacity: 1;
}
h1 {
  font-size: 35px;
  font-weight: 700;
  color: #000;
}
/* Fix for SO */
.sr-block-left {
  width: max-content;
}

<div class="sr-block-left sr-visible">
  <div class="sr-block"></div>
  <div class="sr-block-content">
    <h1>Some awesome title</h1>
  </div>
</div>
<button onclick="toggle()">Toggle Visibility</button>

此转换的目的是在内容到达视口时(当用户滚动时(显示内容。它通过简单地添加sr-visible类来实现这一点。

我遇到的问题是我希望当元素离开视口时过渡反转。尽管不是"在视口中"，但过渡需要反转的原因是，在某些情况下它会在视口中但没有sr-visible类，这是由于我在某些元素上的滚动阈值。

简而言之，是否有可能以类似于它出现的方式扭转这种转变？它不必完全相同的过渡，但越接近越好。关键是"揭示"过渡不会改变。

我试过玩transition-delay和其他各种东西，但到目前为止没有任何运气......

Answer 1

这是一个不同的想法，只依赖于易于逆转的翻译。它还依赖于一个足够大的元素，您只需将其从左向右滑动即可创建所需的效果。

出于演示目的，我简化了您的代码以仅显示动画。如您所见，我通过从左右隐藏的宽度2/3使元素比我平移的容器大 3 倍。

function toggle() {
  var element = document.querySelector('.sr-block');
  element.classList.toggle("sr-visible");
}

.sr-block {
  position: relative;
  --block-color: #ccc;
  --animation-speed: 200ms;
  overflow:hidden;
  display:inline-block;
}
.sr-block > .sr-block-content:before {
   content:"";
   position:absolute;
   z-index:1;
   top:0;
   left:-100%;
   right:-100%;
   bottom:0;
   background:var(--block-color);
   transform:translateX(calc(-2*100%/3 - 2px));
   transition:
    transform calc(2*var(--animation-speed)) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sr-block.sr-visible > .sr-block-content:before {
   transform:translateX(calc(2*100%/3  + 2px));
}
.sr-block > .sr-block-content h1 {
  opacity: 0;
  transition: opacity 0s calc(var(--animation-speed));
}
.sr-block.sr-visible > .sr-block-content h1{
  opacity: 1;
}
h1 {
  font-size: 35px;
  font-weight: 700;
  color: #000;
  margin:0;
}

<div class="sr-block sr-visible">
  <div class="sr-block-content">
    <h1>Some awesome title</h1>
  </div>
</div>
<br>
<button onclick="toggle()">Toggle Visibility</button>

我正在使用-/+2px来避免由于四舍五入而导致的一些不良行为。