CSS translateY正在扩展文档长度

Question

我正尝试使用CSS将我网站的内容从屏幕上翻译过来并在文档加载时对其进行动画处理。

但是，当加载页面时，文档长度垂直伸展到内容翻译到的底部。这似乎在页面上稍微消失后消失，但我显然希望一起解决此问题。

这里是我对内容的造型，当页面加载完成时，它会添加类.load。

main { 
    transform:translate3d(0,100%,0); 
    -moz-transform:translate3d(0,100%,0); 
    -webkit-transform:translate3d(0,100%,0); 
    transition: transform 800ms cubic-bezier(.17,.67,.12,.96); 
    -moz-transition: -moz-transform 800ms cubic-bezier(.17,.67,.12,.96); 
    -webkit-transition: -webkit-transform 800ms cubic-bezier(.17,.67,.12,.96); 
} 
main.load { 
    transform:translate3d(0,0,0); 
    -moz-transform:translate3d(0,0,0); 
    -webkit-transform:translate3d(0,0,0); 
} 

我已经做过类似的事情多次没有问题，但我似乎无法找出什么是这个不同。任何帮助将非常感激！

Answer 1

您的选择：

1. 使用z-index和重叠的内容，有内容已翻译元素是掩盖它。当它滚动到你可以从其他元素下翻译出来。
2. 而不是从侧面翻译。这样，您就可以使用overflow-x:hidden，仍然能够垂直
3. 滚动使用display:none，transition: opacity .3s（带前缀），和opacity:0，等到元素是页面上显示（用JavaScript检测），然后切换到display:block和opacity:1
4. 绝对放置元素。这将需要的元素跳出流程，从而不占用空间留给滚动（推荐）

而且，没有理由使用translate3d，你可以使用translateY(100%)，它不会强迫硬件加速

Answer 2

$('main').ready(function(){ 
    setTimeout(function() { 
     $('main').addClass('load'); 
     setTimeout(function() { 
      $('body').css("overflow-y", "scroll"); 
      setTimeout(function() { 
       $('body').css("overflow-y", "scroll"); 
      },1); 
     },800); 
    },500); 
}); 

这可能是草率的，但它的工作原理

800ms的是它花费的动画，以便一旦它在地方的时候，它击中了overflow属性，然后再经过1毫秒。

尝试了许多功能的组合，这是所有的工作。

Answer 3

您需要制作一个高度为100％的溢出隐藏的包装div。你仍然可以在这个包装div下面有内容。

http://jsfiddle.net/2HuLw/1/

HTML

<div id="main" class="loading"> 

    <div id="inner" class="loading"> 
     <p>intro content.</p> 
    </div> 


</div> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

JS

window.addEventListener('load', function() { 

    document.querySelector('#inner').classList.remove('loading'); 

}) 

CSS

html, body { 
    height: 100%; 
} 

body { 
    margin: 0; 
} 

#main { 
    background: orange; 
    height: 100%; 
    overflow: hidden; 
} 
#inner { 
    background: red; 
    transition-duration: 600ms; 
    overflow: scroll; 
    height: 100%;  
} 
#inner.loading { 
    transform: translateY(100%); 
}