Плавные переходы в Edge? - PullRequest
Новая
       1

Плавные переходы в Edge?

0 голосов
/ 14 февраля 2019

У меня есть переход боковой панели, который отлично работает в Firefox, но при первом его использовании анимация в Edge "отрывистая".Это отстает, а затем очень быстро выходит в этом браузере.После первого использования загрузки каждой страницы, он ведет себя плавно, как в Firefox.Я знаю, что в Edge есть проблемы с переводом, но даже указание типа перехода (translatex) в коде CSS для меня ничего не дало. 

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">

1 Ответ

0 голосов
/ 15 февраля 2019

Трудно сказать, потому что ваш пример кода не запускается, но вы можете попробовать добавить will-change: transform; к элементу боковой панели.

Свойство CSS воля-изменения подсказывает браузерам, как элементкак ожидается, изменится.Браузеры могут настроить оптимизацию до того, как элемент действительно будет изменен.Эти виды оптимизации могут повысить скорость отклика страницы, выполняя потенциально дорогостоящую работу до того, как они действительно потребуются.

Важное замечание: will-change предназначено для использования в качестве последнего средства вЧтобы попытаться решить существующие проблемы с производительностью.Его не следует использовать для предупреждения проблем с производительностью.

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

...