CSS动画将无法使用'overflow：hidden;' [英] CSS animation won't work with 'overflow: hidden;'

问题描述

如果有人能告诉我我做错了什么，我可以指出正确的方向。请查看此示例。正如你可以看到，我试图将div 2移动到div 1，当按钮被点击。它实际上工作正常，第二个div出现在预期的第一个div，但由于某些原因，点击不触发CSS动画，应该给第二个div一个幻灯片效果。

I would appreciate if someone could point me into the right direction by telling me what I'm doing wrong. Please look at this example. As you can see I'm trying to move 'div 2' into 'div 1' when the button is clicked. It actually works fine, the second div appears in the first div as expected, but for some reason the click doesn't trigger the CSS animation which should give the second div a slide effect.

我已经把它缩小到与overflow：hidden属性有关，因为动画实际上会从div 1 '，但是因为你最有可能发现我想要第二个div只有当它位于第一个div时可见。

I've narrowed it down to that it's got something to do with the 'overflow: hidden' attribute, because the animation will actually work when that's removed from 'div 1', but as you most probably figured out I want the second div to only be visible when it's positioned in the first div.

为什么动画不工作？

我使用Chrome，OSX。

I'm using Chrome, OSX.

提前感谢！

/ Christofer

/Christofer

推荐答案

$ c> overflow：hidden 到动画元素：

Another trick could be moving overflow: hidden to the animated element:

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

​

这篇关于CSS动画将无法使用'overflow：hidden;'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！