Question

我在使用css translate时遇到问题，因为它会给身体增加不需要的高度，这是我的代码：

body {width: 1024px; height: 768px;  background: #FFF4B8;}

div.animated {
width: 100px;
height: 100px; 
background: black; 
position: absolute; 
top:100px; 
left:100px; 
-webkit-animation: fadeInUpBig 2s both 1s; }

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

和html：

<body>
<div class="animated">
</div>
</body>

我尝试将overflow: hidden用于身体，但它只删除了滚动条和额外的高度。

Answer 1

translate函数会移动屏幕上的元素（可能会关闭它），但会导致页面重新呈现移动的计算...因此滚动条。

使用位置值（顶部：-2000px）只是将元素移出页面，但不会导致重新呈现页面。

Position Value Demo

<强> CSS

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    top:-2000px;    
  }

  100% {
    opacity: 1;
    top:100px;
  }
}

Translate Demo

<强> CSS

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

css3 translate添加更多高度和宽度

1 个答案: