Проблемы Safari / Webkit с анимацией пути клипа - PullRequest
Новая
       17

Проблемы Safari / Webkit с анимацией пути клипа

0 голосов
/ 14 октября 2019

Я пытаюсь анимировать клип-путь вдоль div. Он отлично работает в Chrome и Firefox, но в Safari на MacOS почему-то глючит. После поиска в похожих вопросах я все еще не могу понять, почему, поскольку я применяю все пути клипа во всех вариантах с помощью javascript.

Я получил два DIV поверх друг друга: 

<div class="title-box bg-grayscale"></div>
<div class="title-box bg"></div>

Где первый DIV находится сверху через z-индекс и имеет такой переход css: 

  -webkit-transition: all 150ms cubic-bezier(0.150, 0.005, 0.580, 1.000);
     -moz-transition: all 150ms cubic-bezier(0.150, 0.005, 0.580, 1.000);
       -o-transition: all 150ms cubic-bezier(0.150, 0.005, 0.580, 1.000);
          transition: all 150ms cubic-bezier(0.150, 0.005, 0.580, 1.000);

И теперь я запускаю путь клипа через javascript каждые 1,5 секунды: 

let clipPathNone = "polygon(0px 0px, 0% 0px, 0% 100%, 0% 100%)";
let clipPathFull = "polygon(0px 0px, 100% 0px, 100% 100%, 0% 100%)";
let clipElement = document.getElementsByClassName("title-box bg-grayscale")[0];

if(clipElement.style.clipPath == clipPathNone) {
  clipElement.style.webkitClipPath = clipPathFull;
  clipElement.style.mozClipPath = clipPathFull;
  clipElement.style.msClipPath = clipPathFull;
  clipElement.style.oClipPath = clipPathFull;
  clipElement.style.clipPath = clipPathFull;
}
 else {
   clipElement.style.webkitClipPath = clipPathNone;
   clipElement.style.mozClipPath = clipPathNone;
   clipElement.style.msClipPath = clipPathNone;
   clipElement.style.oClipPath = clipPathNone;
   clipElement.style.clipPath = clipPathNone;
 }

Тем не менее, в Safari он не работает по какой-то причине. Я думаю, я просто немного знаю о различных браузерах и системах, поэтому любая помощь будет отличной!

...