【问题标题】:Several boxes are animated (translated) asynchronously几个框被异步动画(翻译)
【发布时间】:2015-01-23 14:34:40
【问题描述】:

说明:

页面由三个主要框组成:顶部的标题、右侧的菜单和内容区域。

标题和菜单必须与属性position: fixed

最初菜单是隐藏在页面上的。它在用户点击时出现,例如在特定按钮上。

当它出现时,它会从右向左滑动。同时header和content向左推。

解决方案基于:

使用 CSS3 属性 transformtranslate3d 值和 transition: transform 0.5s linear

问题

在菜单和带有标题框的内容之间的动画期间,我们可以看到闪烁的白色区域。玩背面可见性并没有帮助。

JSFiddle

这是一个在线示例:http://jsfiddle.net/milax/5uc7or6r/6/

浏览器

铬 39

这可能是什么原因造成的?出了什么问题...在此先感谢。

【问题讨论】:

    标签: css transform css-transitions css-animations


    【解决方案1】:

    已修复。

    问题在于属性translate3d 使用百分比而不是像素。所以,

    transform: translate3d(100%, 0, 0);

    必须改为

    transform: translate3d(200px, 0, 0);

    当然,如果你确切知道菜单的宽度。

    【讨论】:

      【解决方案2】:

      添加以下内容:

      .site-wrapper div {
          transition: transform 0.5s linear;
          backface-visibility: hidden;
          outline: 1px solid transparent; /* <--- fixes horrible anti-aliasing */
      }
      

      Demo Fiddle

      【讨论】:

      • 不,它没有帮助,同样的行为。我找到了解决方案,请看我的答案。
      • 嗯,在 Chrome 的 39.0.2171.65 m 版本中,上述工作正常,所以会离开,以防它帮助任何人。
      • 我用的是39.0.2171.65 m的版本,完全一样:)可能也要看电脑的性能。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-04-13
      • 2014-10-03
      • 2013-08-14
      • 2011-09-18
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多