css - z-index 丢失直到过渡结束
问题描述
我一直在玩“折叠”元素rotate3d()
,我遇到了一半折叠的问题 - 在过渡期间,z-index 不受尊重,但最后,它弹出到顶部。我怀疑它与 z 部分有关rotate3d()
(类似于here),但它只发生在两个元素之一上,我不知道有什么区别。
var button = $('.button');
var open = true;
button.click(() => {
var right = $('.triangle.topright');
var left = $('.triangle.topleft');
if (open) {
right.addClass('r-close');
left.addClass('l-close');
} else {
right.removeClass('r-close');
left.removeClass('l-close');
}
open = !open;
});
.container {
box-sizing: border-box;
display: flex;
padding: 50px 75px;
position: relative;
height: 300px;
width: 100%;
}
.fold.r-close {
transform-origin: left;
transform: rotate3d(0, 1, 0, 90deg);
}
.fold {
box-sizing: border-box;
display: inline-block;
height: 100px;
width: 100px;
position: relative;
transition: all 1.5s;
transform-style: preserve-3d;
}
.fold.outer {
width: 150px;
}
.fold.left {
margin-left: 50px;
}
.triangle {
height: 0;
position: absolute;
transition: all 1.5s;
width: 0;
}
/* middle */
.triangle.middle {
top: 0;
z-index: -1 !important;
}
.triangle.middle.left {
border-bottom: 100px solid pink;
border-left: 100px solid transparent;
right: 0;
}
.triangle.middle.right {
border-bottom: 100px solid pink;
border-right: 100px solid transparent;
left: 0;
}
/* right fold */
.triangle.topright.front {
border-bottom: 100px solid red;
border-right: 100px solid transparent;
backface-visibility: hidden;
transform: rotate3d(1, 1, 0, 180deg);
}
.triangle.topright.back {
backface-visibility: hidden;
border-left: 100px solid transparent;
border-top: 100px solid pink;
left: -0.6px;
}
/* left fold */
.triangle.topleft.front {
border-bottom: 100px solid red;
border-left: 100px solid transparent;
backface-visibility: hidden;
transform: rotate3d(-1, 1, 0, 180deg);
}
.triangle.topleft.back {
backface-visibility: hidden;
border-top: 100px solid pink;
border-right: 100px solid transparent;
right: -0.6px;
}
/* folds */
.r-close.back {
transform: rotate3d(1, 1, 0, 180deg);
}
.triangle.r-close.front {
transform: rotate3d(1, 1, 0, 0deg);
}
.l-close.back {
transform: rotate3d(-1, 1, 0, 180deg);
}
.triangle.l-close.front {
transform: rotate3d(-1, 1, 0, 0deg);
}
.button {
bottom: 0;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="fold outer">
<div class="triangle middle left"></div>
<div class="fold left">
<div class="triangle topleft front"></div>
<div class="triangle topleft back"></div>
</div>
</div>
<div class="fold outer">
<div class="triangle middle right"></div>
<div class="fold right">
<div class="triangle topright front"></div>
<div class="triangle topright back"></div>
</div>
</div>
<button class="button">Click</button>
</div>
解决方案
这种行为是合乎逻辑的,有点难以解释,但这是由于旋转方向造成的。如果您仔细观察,您会看到右侧部分通过转到顶部(考虑 Z 轴)而转动,但左侧部分通过转到底部而转动,这就是为什么它在旋转时被隐藏的原因。
为了纠正这个问题,您需要反转左侧部分的旋转,使其表现得像右侧一样。而不是0deg
你需要使用360deg
.
var button = $('.button');
var open = true;
button.click(() => {
var right = $('.triangle.topright');
var left = $('.triangle.topleft');
if (open) {
right.addClass('r-close');
left.addClass('l-close');
} else {
right.removeClass('r-close');
left.removeClass('l-close');
}
open = !open;
});
.container {
box-sizing: border-box;
display: flex;
padding: 50px;
position: relative;
width: 100%;
}
.fold.r-close {
transform-origin: left;
transform: rotate3d(0, 1, 0, 90deg);
}
.fold {
box-sizing: border-box;
display: inline-block;
height: 100px;
width: 100px;
position: relative;
transition: all 1.5s;
transform-style: preserve-3d;
}
.fold.outer {
width: 150px;
}
.fold.left {
margin-left: 50px;
}
.triangle {
height: 0;
position: absolute;
transition: all 1.5s;
width: 0;
}
/* middle */
.triangle.middle {
top: 0;
z-index: -1 !important;
}
.triangle.middle.left {
border-bottom: 100px solid pink;
border-left: 100px solid transparent;
right: 0;
}
.triangle.middle.right {
border-bottom: 100px solid pink;
border-right: 100px solid transparent;
left: 0;
}
/* right fold */
.triangle.topright.front {
border-bottom: 100px solid red;
border-right: 100px solid transparent;
backface-visibility: hidden;
transform: rotate3d(1, 1, 0, 180deg);
}
.triangle.topright.back {
backface-visibility: hidden;
border-left: 100px solid transparent;
border-top: 100px solid pink;
left: -0.6px;
}
/* left fold */
.triangle.topleft.front {
border-bottom: 100px solid red;
border-left: 100px solid transparent;
backface-visibility: hidden;
transform: rotate3d(-1, 1, 0, 180deg);
}
.triangle.topleft.back {
backface-visibility: hidden;
border-top: 100px solid pink;
border-right: 100px solid transparent;
right: -0.6px;
}
/* folds */
.r-close.back {
transform: rotate3d(1, 1, 0, 180deg);
}
.triangle.r-close.front {
transform: rotate3d(1, 1, 0, 0deg);
}
.l-close.back {
transform: rotate3d(-1, 1, 0, 180deg);
}
.triangle.l-close.front {
transform: rotate3d(-1, 1, 0, 360deg); /*Updated this*/
}
.button {
bottom: 0;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="fold outer">
<div class="triangle middle left"></div>
<div class="fold left">
<div class="triangle topleft front"></div>
<div class="triangle topleft back"></div>
</div>
</div>
<div class="fold outer">
<div class="triangle middle right"></div>
<div class="fold right">
<div class="triangle topright front"></div>
<div class="triangle topright back"></div>
</div>
</div>
<button class="button">Click</button>
</div>
推荐阅读
- azure-sql-database - 我们如何检查某人在 Azure SQL 中运行查询的频率?
- android - 我无法构建 Flutter apk,因为访问“FlutterEngine”类
- google-chrome-extension - 无法从 Chrome 扩展文件系统加载 html 文件
- .htaccess - htaccess - 隐藏文件扩展名并仅保留变量的值
- vb.net - 使用 .NET 5 的 Visual Basic 项目的高 DPI 模式错误
- reactjs - 将属性添加到 React Typescript 接口
- windows - 'mongoimport' 不是内部或外部命令、可运行程序或批处理文件
- java - 需要一个 java 同步辅助(类似于 ReentrantReadWriteLock 的东西)
- c - 在同一个进程中,同一个文件的多个 MAP_PRIVATE 映射是否仍然是私有的?
- python - AttributeError:“TensorDataset”对象没有属性“视图”