Div 在变换动画期间被剪裁

Question

我目前在开发动画时遇到问题。 关键是我在一个绝对定位的较小 DIV 中有一个大的 DIV。大 DIV 最初是隐藏的，在执行特定操作时应以 rotate-X 动画显示。

但是，在旋转动画期间，DIV 被切断，并且仅在动画之后完全显示。 播放隐藏动画时也会发生同样的事情。

使用Firefox，DIV总是被剪裁。 使用Chrome，剪辑仅在动画播放时发生。

不幸的是，需要.super-parendDIV 的overflow: hidden。

有谁知道这个问题的解决方法？

$('#btnShow').on('click', function() {
$('.child').removeClass('hide');
$('.child').addClass('show');
});
$('#btnHide').on('click', function() {
$('.child').removeClass('show');
$('.child').addClass('hide');
});

.super-parent {
overflow: hidden;
height: 100px;
border: 1px dashed red;
}
.parent {
width: 100%;
border: 1px solid black;
overflow: visible;
perspective: 800px;
perspective-origin: 50% 50%;
}
.static-child {
text-align: center;
vertical-align: middle;
}
.child {
position: absolute;
border: 1px solid green;
top: 0;
opacity: 0;
left: 50%;
transform: translateX(-50%);
transform-origin: top;
background: white;
width: 100px;
height: 200px;
text-align: center;
}
.child.show {
animation: swing-in-top-fwd 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}

.child.hide {
animation: swing-out-top-bck 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}
input {
margin-top: 50px;
}
@-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
}
@keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
}
@-webkit-keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}
@keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="super-parent">
<div class="parent">
<div class="static-child">
01.01.2018
</div>
<div class="child hide">
test
</div>
</div>
</div>
<input type="button" id="btnShow" value="show">
<input type="button" id="btnHide" value="hide">

Answer 1

我想我自己找到了解决方案：.parentdiv 中的perspective: 800px似乎是导致剪辑的原因。 当我将perspective属性移动到正文时，div 已完全显示。

$('#btnShow').on('click', function() {
$('.child').removeClass('hide');
$('.child').addClass('show');
});
$('#btnHide').on('click', function() {
$('.child').removeClass('show');
$('.child').addClass('hide');
});

body {
perspective: 800px;
}
.super-parent {
overflow: hidden;
height: 100px;
border: 1px dashed red;
}
.parent {
width: 100%;
border: 1px solid black;
overflow: visible;
/* perspective: 800px; */
perspective-origin: 50% 50%;
}
.static-child {
text-align: center;
vertical-align: middle;
}
.child {
position: absolute;
border: 1px solid green;
top: 0;
opacity: 0;
left: 50%;
transform: translateX(-50%);
transform-origin: top;
background: white;
width: 100px;
height: 200px;
text-align: center;
}
.child.show {
animation: swing-in-top-fwd 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}

.child.hide {
animation: swing-out-top-bck 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}
input {
margin-top: 50px;
}
@-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(-1deg) translateX(-50%);
transform: rotateX(-1deg) translateX(-50%);
opacity: 1
}
}
@keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(-1deg) translateX(-50%);
transform: rotateX(-1deg) translateX(-50%);
opacity: 1
}
}
@-webkit-keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}
@keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="super-parent">
<div class="parent">
<div class="static-child">
01.01.2018
</div>
<div class="child hide">
test
</div>
</div>
</div>
<input type="button" id="btnShow" value="show">
<input type="button" id="btnHide" value="hide">

Answer 2

你可以更改 html 结构吗？似乎一切正常，如果：1( -div.parent 具有绝对位置并且没有更多的子项和 2( - 有一个具有相对位置的超级父级div。

$('#btnShow').on('click', function() {
$('.child').removeClass('hide');
$('.child').addClass('show');
});
$('#btnHide').on('click', function() {
$('.child').removeClass('show');
$('.child').addClass('hide');
});

.super-parent {
overflow: hidden;
height: 100px;
border: 1px dashed red;
}
.super-super-parent {
position: relative;
}
.parent {
width: 100%;
border: 1px solid black;
overflow: visible;
perspective: 800px;
perspective-origin: 50% 50%;
position: absolute;
}
.static-child {
text-align: center;
vertical-align: middle;
}
.child {
position: absolute;
border: 1px solid green;
top: 0;
opacity: 0;
left: 50%;
transform: translateX(-50%);
transform-origin: top;
background: white;
width: 100px;
height: 200px;
text-align: center;
}
.child.show {
animation: swing-in-top-fwd 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}

.child.hide {
animation: swing-out-top-bck 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}
input {
margin-top: 50px;
}
@-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
}
@keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
}
@-webkit-keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}
@keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="super-super-parent">
<div class="super-parent">
<div class="parent">
<div class="static-child">
01.01.2018
</div>
<div class="child hide">
test
</div>
</div>
<div class="one-more-child">
<p>test text</p>
<p>test text</p>
<p>test text</p>
<p>test text</p>
</div>
</div>
</div>
<input type="button" id="btnShow" value="show">
<input type="button" id="btnHide" value="hide">