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

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

出于演示目的，我简化了代码，仅显示动画。如您所见，我将元素的大小放大了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来避免由于四舍五入引起的不良行为。

逆向转换与延迟问题

1 个答案: