Div 在变换动画期间被剪裁答案

【问题标题】：Div gets clipped during transform animationDiv 在变换动画期间被剪裁
【发布时间】：2018-06-19 19:23:59
【问题描述】：

我目前在开发动画时遇到问题。关键是我在一个绝对定位的较小 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">

【问题讨论】：

这与您的问题没有直接关系，但仅供参考 vertical-align 不适用于块元素：developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
所以我没有得到问题：你希望 div 不被切断？
@elena 对不起我的英语不好.. 是的，我希望 div 不被切断。让我感到困惑的是，使用 Chrome 时，div 只会在动画运行时被切断。动画结束后没有剪辑。
嘿，只需删除父级的overflow: hidden。
感谢您的回答。不幸的是，我无法删除 overflow: hidden

标签： html css css-animations css-transforms

【解决方案1】：

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

【讨论】：

【解决方案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">

【讨论】：

谢谢，但很遗憾我无法修改结构。但我想我找到了解决方案。请参阅下面我自己的答案。