Question

我正在尝试沿div设置剪切路径的动画。它可以在Chrome和Firefox中完美运行，但由于某些原因，在MacOS的Safari中似乎有问题。在搜索了类似的问题之后，我仍然无法弄清楚为什么，因为我正在通过javascript在所有变体中应用所有剪切路径。

我彼此之间有两个DIV：

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

第一个DIV通过z-index在顶部，并且具有过渡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);

现在我每1.5秒通过javascript触发剪辑路径：

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中使用。我想我对不同的浏览器和系统所知甚少，所以任何帮助都将非常有用！

动画剪辑路径的Safari / Webkit问题

0 个答案: