Javascript 如何使用动画覆盖来遮罩元素？

我正在尝试为我正在进行的一个项目进行一些页面转换，当用户使用BABA浏览站点时，屏幕上会出现一个动画覆盖，但我遇到了一个问题

我想要一个标志集中在页面上，与覆盖一起滚动，但我需要它与覆盖分开放置，因为覆盖上的任何变换也会影响标志。（我希望徽标使用叠加元素遮罩）

我所尝试的：

• 切换元素层次结构/Z索引（我确信问题就在这里）
• 尝试不同的转换
• 弄乱了“最大宽度”（取得了一些成功，但我需要“变换原点”属性）

范例-

let transitionOpen=false；
$（'.transition cta'）。打开（“单击”，函数（）{
if（transitionOpen==false）{
$（'.transition-background'）.css（“transform”，“scaleX（1）”）；
$（this.css（“颜色”、“白色”）；
transitionOpen=true；
}否则{
$（'.transition-background'）.css（“transform”，“scaleX（0）”）；
$（this.css（“颜色”、“黑色”）；
transitionOpen=false；
}
});
正文{
背景颜色：浅蓝色；
}
.一些内容{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.过渡包装{
溢出：隐藏；
}
.过渡背景{
宽度：100%；
高度：100vh；
位置：绝对位置；
排名：0；
左：0；
变换原点：左；
过渡：0.7秒缓进缓出；
背景色：#1F；
变换：scaleX（0）；
z指数：2；
}
.过渡中心{
背景图像：url（'https://i.imgur.com/6um9G9h.png');
z指数：2；
宽度：150px；
高度：150像素；
位置：绝对位置；
背景重复：无重复；
背景尺寸：封面；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.过渡cta{
文字装饰：下划线；
光标：指针；
z指数：3；
位置：绝对位置；
}

触发跃迁
一些内容
使用
剪辑路径
动画，您可以通过将徽标作为
过渡包装的背景来简化代码


let transitionOpen=false；
$（'.transition cta'）。打开（“单击”，函数（）{
$（'.transition wrapper'）.toggleClass（'show'）；
if（transitionOpen==false）{
$（this.css（“颜色”、“白色”）；
transitionOpen=true；
}否则{
$（this.css（“颜色”、“黑色”）；
transitionOpen=false；
}
});
正文{
背景颜色：浅蓝色；
}
.一些内容{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.过渡包装{
宽度：100%；
高度：100vh；
位置：绝对位置；
排名：0；
左：0；
过渡：0.7秒缓进缓出；
背景：url（'https://i.imgur.com/6um9G9h.png'）中心/150px 150px无重复；
背景色：#1F；
剪辑路径：多边形（0,0%0,0%100,0 100%）；
z指数：3；
}
.transition-wrapper.show{
剪辑路径：多边形（0,100%0,100%100,0,100%）；
}
.过渡cta{
文字装饰：下划线；
光标：指针；
z指数：3；
位置：绝对位置；
}

触发跃迁
一些内容
我会做如下事情：


$（'.transition cta'）。在（“单击”，函数（）上）{
$（'.transition wrapper'）.toggleClass（'opened'）；
$（'.transition content'）.animate（{width:'toggle'}，800）；
});
正文{
背景：浅蓝色；
}
.内容{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.过渡内容{
背景色：#1F；
显示：无；
溢出：隐藏；
位置：绝对位置；
右：0；
左：0；
排名：0；
底部：0；
宽度：100%；
}
.过渡cta{
位置：相对位置；
文字装饰：下划线；
z指数：999；
}
.transition-wrapper.opened.transition-cta{
颜色：#fff；
}
.transition-content\uuu内部{
宽度：100vw；
}
.transition-content\uuuu内部img{
宽度：150px；
高度：150像素；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

触发跃迁
一些内容
而不是
scaleX（0）
transitionbackground
，你呢
translateX（-100%）
整个
.transition包装器
？很好，我在查看剪辑路径，因为我以前用它做过类似的事情，但我不知道如何应用它。非常感谢。这是我最初尝试做的，但是我希望徽标像答案一样直接位于屏幕中央。感谢你花了这么多时间来回答，虽然我明白你的意思——很高兴你得到了这个答案。