Question

我正在尝试为我正在处理的项目做一些页面转换，当用户使用Barba导航网站时，屏幕上出现了动画叠加层，但是我遇到了问题。

我希望徽标位于与覆盖一起滚动的页面的中心，但是我需要将其与覆盖分开放置，因为覆盖上的任何变换也会影响徽标。（我希望徽标以叠加元素遮盖）

我尝试过的：

切换元素层次结构/ Z索引（我确定问题出在这里）
尝试不同的变换
使用最大宽度进行处理（取得了一些成功，但我需要转换原点属性）

示例-

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动画，并且可以通过将徽标作为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>

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>

我将如何使用动画叠加来遮罩元素？

2 个答案: