Div在变换动画期间被剪裁

时间：2018-06-19 09:56:53

标签： html css css-animations css-transforms

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

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

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

不幸的是，overflow: hidden DIV的.super-parend是必需的。

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

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

$('#btnHide').on('click', function() {
  $('.child').removeClass('show');
  $('.child').addClass('hide');
});
＆＃13; 
.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
  }
}
＆＃13; 
<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">
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

我想我自己找到了解决方案： perspective: 800px div中的.parent似乎是造成剪切的原因。 当我将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">

答案 1 :(得分：0)

您是否可以更改html结构？似乎一切正常如果：1） - div.parent有绝对位置，没有更多的孩子和2） - 有一个超级父div与相对位置。

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

$('#btnHide').on('click', function() {
  $('.child').removeClass('show');
  $('.child').addClass('hide');
});
＆＃13; 
.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
  }
}
＆＃13; 
<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">
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题