时间戳

首页 > 解决方案 > Edge 中的平滑过渡？

javascript - Edge 中的平滑过渡？

问题描述

我有一个在 Firefox 中运行良好的侧边栏过渡，但是第一次使用它时，动画在 Edge 中是“生涩的”。它滞后，然后在该浏览器中非常快地出现。在第一次使用 per-page-load 之后，它的行为就像在 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">

标签： javascripthtmlcssmicrosoft-edge

解决方案

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

will-change CSS 属性向浏览器提示元素应该如何改变。浏览器可能会在元素实际更改之前设置优化。这些类型的优化可以通过在实际需要之前执行潜在的昂贵工作来提高页面的响应能力。

重要提示： will-change 旨在用作最后的手段，以尝试处理现有的性能问题。它不应该用于预测性能问题。

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

推荐阅读