如何使用动态覆盖层来遮蔽一个元素？

Question

我正在为一个项目做一些页面过渡效果，当用户使用Barba浏览网站时，我有一个动画叠加层出现在屏幕上，但我遇到了问题。

我想在页面中心放置一个标志，随着叠加层一起滚动显示，但我需要将它与叠加层分开定位，因为对叠加层进行任何变换也会影响标志。（我希望标志与叠加层元素遮罩）

我尝试过：

• 切换元素层次结构/ 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>

（地球应该与覆盖层一起滚动）

这感觉像一个非常简单的问题，但我真的很难解决。我无法确定是我已经筋疲力尽了，还是这实际上像我的大脑所想象的那样复杂。

谢谢！

- TC Work

---

不妨尝试将整个.transition-wrapper进行translateX(-100%)，而非仅对.transition-background使用scaleX(0)。 - Thomas

Answer 1

使用 clip-path 动画，将标志设计为 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>

- Temani Afif

---

太好了，我正在研究剪辑路径，因为我之前用过它来实现类似的效果，但我不知道如何应用它。谢谢！ - TC Work

Answer 2

我会这样做：

$('.transition-cta').on("click", function() {
  $('.transition-wrapper').toggleClass('opened');
  $('.transition-content').animate({ width: 'toggle' }, 800);
});

body {
  background: lightblue;
}

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

.transition-content {
  background-color: #1f1f1f;
  display: none;
  overflow: hidden;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

.transition-cta {
  position: relative;
  text-decoration: underline;
  z-index: 999;
}

.transition-wrapper.opened .transition-cta {
  color: #fff;
}

.transition-content__inner {
  width: 100vw;
}

.transition-content__inner img {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="transition-wrapper">
  <div class="transition-cta">Trigger Transition</div>
  <div class="content">
    <h1>Some Content</h1>
  </div>
  <div class="transition-content">
    <div class="transition-content__inner">
      <img src="https://i.imgur.com/6um9G9h.png"/>
    </div>
  </div>
</div>

- Jamie

---

这是我最初尝试的方法，但我希望像标记答案那样，标志保持直接位于屏幕中心。感谢您花费时间回答。 - TC Work

啊，我明白你的意思了——很高兴你得到了答案。 - Jamie