如果有人可以通过告诉我我做错了什么来指出我正确的方向,我将不胜感激.请看这个
example.正如你所看到的那样,当点击按钮时,我试图将’div 2’移动到’div 1′.它实际上工作正常,第二个div出现在第一个div中按预期,但由于某种原因点击不会触发CSS动画,这应该给第二个div一个幻灯片效果.
我把它缩小到与’溢出：隐藏’属性有关,因为当从’div 1’移除动画时,动画实际上会工作,但是你很可能想到我希望第二个div到只有当它位于第一个div中时才可见.
动画为什么不起作用？
我正在使用Chrome,OSX.
提前致谢！
/克里斯托弗
解决方法
另一个技巧可能是移动溢出：隐藏到动画元素：
#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; }
}
