Question

本周，我完成了当前的Codepen挑战，并且旋转动画无法在Safari中正常工作。动画由HTML中包含的onclick事件触发。在Safari中，动画没有平滑旋转，而是跳跃并且看起来不太好。

以下是整个密码笔的链接：https://codepen.io/aduboisforge/full/PVZWom

以下是重要的样式，因此您可以快速找到它：

通过使用公共边框技巧创建三角形。旋转的三角形具有类别“ triA”和“ triC”。这是这些div的样式，通过click事件添加的'triRot'类位于该类的正下方：

.triA, .triC {
  position: absolute;
  left: -95px;
  top: -10px;
  height: 0px;
  width: 0px;
  border-left: 100px solid transparent;
  border-right: 100px solid black;
  border-bottom: 100px solid transparent;
}

.triRot {
  -webkit-animation: triR  1s forwards linear ;
-webkit-animation-fill-mode: forwards;
  -moz-animation:    triR  1s forwards linear ;
  -o-animation:      triR  1s forwards linear ;
  animation:         triR  1s forwards linear ;

}

@-webkit-keyframes triR {
  0% {
      left: -95px;
      top: -10px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);

  }
  100% {
left: 70px;
top: -30px;
    -webkit-transform: rotate(110deg);
    -moz-transform: rotate(110deg);
    -ms-transform: rotate(110deg);
    -o-transform: rotate(110deg);
    transform: rotate(110deg);
    } }
@-moz-keyframes triR  {    0% {
    left: -95px;
    top: -10px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);

  }
  100% {
    left: 70px;
    top: -30px;
    -webkit-transform: rotate(110deg);
    -moz-transform: rotate(110deg);
    -ms-transform: rotate(110deg);
    -o-transform: rotate(110deg);
    transform: rotate(110deg);
    } }
@-o-keyframes triR  {     0% {
  left: -95px;
  top: -10px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);

  }
  100% {
    left: 70px;
    top: -30px;
    -webkit-transform: rotate(110deg);
    -moz-transform: rotate(110deg);
    -ms-transform: rotate(110deg);
    -o-transform: rotate(110deg);
    transform: rotate(110deg);
    } }
@keyframes triR {     0% {
    left: -95px;
    top: -10px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);

  }
  100% {
    left: 70px;
    top: -30px;
    -webkit-transform: rotate(110deg);
    -moz-transform: rotate(110deg);
    -ms-transform: rotate(110deg);
    -o-transform: rotate(110deg);
    transform: rotate(110deg);
    } }

通过onclick函数添加动画类，该函数传递三角形的类“ triA”或“ triC”，然后通过for循环将“ triRot”类添加到这些元素。

HTML：

 <div class="xBox" id="xBox1" onclick="xbCli('triA')">

JS：

function xbCli(c1) {
  console.log('click');
  var tris = document.getElementsByClassName(c1);
  console.log(tris, tris.length);
  for (i=0;i<tris.length;i++) {

    tris[i].classList.add('triRot');
  }
}

当单击顶部的.xBox时，底部的三角形也会在Safari中受到影响。我不知道为什么，因为这些三角形都不包含“ triA”类。

这是到目前为止我尝试过的：

我尝试添加-webkit前缀。我也尝试过不使用速记，而是专门写出每个动画属性，因为Safari过去在速记语法方面存在问题。我还确保每个更改的值都包含在0％和100％的帧中，因为Safari过去曾遇到过问题。

动画在Safari中无法正常运行，在其他浏览器中仍可以正常运行

0 个答案: