javascript - 我将如何使用动画叠加层来掩盖元素？

Question

我正在尝试为我正在进行的元素做一些页面转换，当用户使用 Barba 浏览网站时，我有一个动画叠加层出现在屏幕上，但我遇到了问题。

我想要一个以页面为中心的 Logo ，该 Logo 与叠加层一起滚动，但我需要将其与叠加层分开放置，因为叠加层上的任何变换也会影响 Logo 。 (我希望 Logo 用叠加元素遮盖)

我尝试过的:

• 切换元素层次结构/Z-index(我确定问题出在此处)
• 尝试不同的转换
• 搞乱最大宽度(取得了一些成功，但我需要变换原点属性)

例子-

let transitionOpen = false;

$('.transition-cta').on("click", function() {
  if (transitionOpen === false) {
    $('.transition-background').css("transform", "scaleX(1)");
    $(this).css("color", "white");
    transitionOpen = true;
  } else {
    $('.transition-background').css("transform", "scaleX(0)");
    $(this).css("color", "black");
    transitionOpen = false;
  }
});

body {
  background-color: lightblue;
}

.someContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.transition-wrapper {
  overflow: hidden;
}

.transition-background {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: left;
  transition: 0.7s ease-in-out;
  background-color: #1f1f1f;
  transform: scaleX(0);
  z-index: 2;
}

.transition-center {
  background-image: url('https://i.imgur.com/6um9G9h.png');
  z-index: 2;
  width: 150px;
  height: 150px;
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.transition-cta {
  text-decoration: underline;
  cursor: pointer;
  z-index: 3;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="transition-wrapper">
  <div class="transition-background"></div>
  <!-- I want to clip this with the transition background -->
  <div title="I only want this to show with the transition overlay" class="transition-center"></div>
</div>

<div class="transition-cta">Trigger Transition</div>

<div class="someContent">
  <h1>Some Content</h1>
</div>

(地球应该与叠加层一起滚动)

这感觉像是一个极其简单的问题，但我真的很难解决它。我不知道我是精疲力竭了，还是这实际上和我的大脑一样复杂。

谢谢!

Answer 1

改用clip-path 动画，您可以通过将 Logo 作为transition-wrapper 的背景来简化代码

let transitionOpen = false;

$('.transition-cta').on("click", function() {
  $('.transition-wrapper').toggleClass('show');
  if (transitionOpen === false) {
    $(this).css("color", "white");
    transitionOpen = true;
  } else {
    $(this).css("color", "black");
    transitionOpen = false;
  }
});

body {
  background-color: lightblue;
}

.someContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.transition-wrapper {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.7s ease-in-out;
  background: url('https://i.imgur.com/6um9G9h.png') center/150px 150px no-repeat;
  background-color: #1f1f1f;
  clip-path: polygon(0 0, 0%  0, 0%   100%, 0 100%);
  z-index: 3;
}

.transition-wrapper.show {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.transition-cta {
  text-decoration: underline;
  cursor: pointer;
  z-index: 3;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="transition-wrapper">
</div>

<div class="transition-cta">Trigger Transition</div>

<div class="someContent">
  <h1>Some Content</h1>
</div>