javascript - 延迟问题的逆转过渡

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>

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

我遇到的问题是，当元素离开视口(viewport)时，我希望转换反转。尽管不在“视口(viewport)中”但转换需要反转的原因是因为在某些情况下它会在视口(viewport)中但不会有 sr-visible 类，这是由于滚动我对某些元素的阈值。

简而言之，是否有可能以与出现的方式类似的方式逆转这种转变？它不必是完全相同的过渡，但越接近越好。关键是“显示”过渡没有改变。

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

Answer 1

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

出于演示目的，我简化了您的代码以仅显示动画。如您所见，我使元素比我翻译的容器大 3 倍，从左右隐藏其宽度的 2/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 来避免由于四舍五入而导致的一些不良行为。