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%); 
}