CSS动画不适用于'overflow:hidden;'

Question

如果有人可以通过告诉我我做错了什么来指出我正确的方向,我将不胜感激.请看这个例子.正如您所看到的,当单击按钮时,我试图将"div 2"移动到"div 1".它实际上工作正常,第二个div出现在第一个div中按预期,但由于某种原因点击不会触发CSS动画,这应该给第二个div一个幻灯片效果.

我把它缩小到与'溢出:隐藏'属性有关,因为当从'div 1'移除动画时,动画实际上会工作,但是你很可能想到我希望第二个div到只有当它位于第一个div中时才可见.

动画为什么不起作用？

我正在使用Chrome,OSX.

提前致谢!

/克里斯托弗

Answer 1

如果遇到麻烦,他可以帮助你:

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

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

不幸的是它显示了水平滚动条.

Answer 2

另一个技巧可能是转移overflow: hidden到动画元素：

\n\n

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

\n\n

#id1 {\n    width: 0px;\n    overflow: hidden;\n}\n\n#id1 > p {\n    width: 500px; /* you probably want a fixed width for the content  */\n}\n\n@-webkit-keyframes slide {\n  0%   { left: 500px; top: 0px; width:   0px; }\n  100% { left:   0px; top: 0px; width: 500px; }\n}\n\n\xe2\x80\x8b\n

\n