html – CSS动画不适用于’overflow：hidden;’

发布时间：2020-12-14 23:20:58 所属栏目：资源来源：网络整理

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

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

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

动画为什么不起作用？

我正在使用Chrome,OSX.

提前致谢！

/克里斯托弗

解决方法

另一个技巧可能是移动溢出：隐藏到动画元素：

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

?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!