Анимация не работает правильно в Safari, работает в других браузерах - PullRequest
Новая
       7

Анимация не работает правильно в Safari, работает в других браузерах

0 голосов
/ 25 января 2019

Я выполнил текущее задание по коду для этой недели, и мои анимации вращения не работают правильно в Safari. Анимации запускаются событием onclick, включенным в HTML. В Safari анимация не вращается плавно, а выглядит не очень хорошо.

Вот ссылка на весь кодовый блок: https://codepen.io/aduboisforge/full/PVZWom

Вот стиль, который важен для быстрого поиска:

Треугольники создаются с помощью обычного граничного трюка. Вращающиеся треугольники имеют классы «triA» и «triC». Вот стиль для этих div'ов, и класс 'triRot', который добавляется через событие click, находится прямо под этим: 

.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», а затем класс «triRot» добавляется к этим элементам через цикл for.

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 в прошлом были проблемы с этим.

...