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

Question

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

我已将其缩小到与'溢出：隐藏'属性有关，因为当从'div 1'移除动画时，动画实际上会起作用，但是你很可能想到我想要的第二个div仅在它位于第一个div中时才可见。

为什么动画不起作用？

我正在使用Chrome，OSX。

提前致谢！

/ Christofer

Answer 1

如果遇到麻烦，他可以帮助你：

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

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

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

Answer 2

另一个技巧可能是将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; }
}

​