Question

我有一个侧边栏过渡，它在Firefox中可以正常工作，但是第一次使用它时，动画在Edge中是“生涩的”。它滞后，然后在该浏览器中很快出现。首次使用每页加载后，它的运行情况与Firefox中类似。我知道Edge在翻译所有内容时都会遇到问题，但是即使在CSS代码中指定过渡类型（translatex）也对我没有任何帮助。

var sidebar = document.getElementById('sidebar');
var burger = document.getElementById('BurgerID');

burger.addEventListener('click', function() {

      if (burger.classList.contains('open')) {
        burger.classList.remove('open');
          sidebar.style.transform = 'translateX(400%)';
      } else {
        burger.classList.add('open');
          sidebar.style.transform = 'translateX(300%)';
    sidebar.style.zIndex = 998;
      }

});

sidebar {
    background: rgba(255,255,255,0.90);
    position: fixed;
    transform: translateX(400%);
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -ms-transition: translatex .5s ease;
    top: 0px;
    bottom: 0px;
    width: 25%;
    height: 100%;
}

<div id="BurgerID" class="">
            <mark class="mark-1"></mark>
            <mark class="mark-2"></mark>
            <mark class="mark-3"></mark>
</div>
<div id="sidebar" class="sidebar">

Answer 1

很难说，因为您的代码示例未运行，但是您可以尝试将will-change: transform;添加到侧边栏元素。

将更改的CSS属性向浏览器提示元素期望如何更改。浏览器可以在实际更改元素之前设置优化。这些优化可以通过在实际需要之前进行潜在的昂贵工作来提高页面的响应速度。

重要提示：：将will-change作为最后的手段，旨在尝试解决现有的性能问题。不应将其用于预测性能问题。

https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

Edge中的过渡平滑吗？

1 个答案: