CSS動畫不能與'overflow：hidden'一起使用

Question

如果有人通過告訴我我做錯了什麼，可以指引我走向正確的方向，我將不勝感激。請看這example。正如你所看到的，我試圖在單擊按鈕時將'div 2'移動到'div 1'。它實際上工作正常，第二個div出現在預期的第一個div中，但由於某種原因，點擊不會觸發應該給第二個div帶來滑動效果的CSS動畫。

我把它縮小到它與'overflow：hidden'屬性有關，因爲當動畫從'div 1'中移除時，動畫將會實際工作，但是正如你最可能想到的，我想要第二個div只有在它位於第一個div時纔可見。

動畫爲什麼不起作用？

我使用的是Chrome OSX。

在此先感謝！

/克里斯托弗

Answer 1

另一個竅門可移動overflow: hidden的動畫元素：

http://jsfiddle.net/GLdQs/9/

#id1 { 
    width: 0px; 
    overflow: hidden; 
} 

#id1 > p { 
    width: 500px; /* you probably want a fixed width for the content */ 
} 

@-webkit-keyframes slide { 
    0% { left: 500px; top: 0px; width: 0px; } 
    100% { left: 0px; top: 0px; width: 500px; } 
} 

​ 

Answer 2

他可以幫助你，如果你遇到了麻煩：

http://jsfiddle.net/GLdQs/8/

.container { 
    /* overflow: hidden; */ 
    clip: rect(auto, auto, auto, auto); 
} 

不幸的是它表明了水平滾動條。