Div 在变换动画期间被剪裁

Question

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

但是，在旋转动画期间，DIV 被切断，仅在动画之后完整显示。播放隐藏动画时也是如此

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

不幸的是，.super-parend DIV 的 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

可以更改 html 结构吗？如果出现以下情况，似乎一切正常：1) - div.parent 具有绝对位置，不再有 children 和 2) - 有一个超级 parent 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">

Answer 2

我想我自己找到了解决方案： .parent div 中的 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">

Div 在变换动画期间被剪裁

Div gets clipped during transform animation

html

css

css-transforms

css-animations