html - 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

我想我自己找到了解决方案: .parent div 中的perspective: 800px 似乎负责剪裁。 当我将 perspective 属性移动到 body 时，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">