6

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

我把它缩小到它与“溢出：隐藏”属性有关，因为当它从“div 1”中删除时动画实际上会起作用，但正如你最可能想出的那样，我想要第二个 div只有当它位于第一个 div 时才可见。

为什么动画效果不好？

我正在使用 Chrome，OSX。

提前致谢！

/克里斯托弗

4

2 回答 2

18

如果您遇到困难，他可以帮助您：

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

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

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

于 2012-07-07T21:52:57.913 回答
3

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

​
于 2012-07-07T22:59:16.967 回答