Анимации и задержка анимации ведут себя случайным образом в Safari - PullRequest
Новая
       12

Анимации и задержка анимации ведут себя случайным образом в Safari

0 голосов
/ 17 декабря 2018

Я пытаюсь анимировать определенную страницу, где есть три основных компонента, две таблицы и одна диаграмма.Пожалуйста, обратитесь к JSFiddle, чтобы повторить то же самое в вашем браузере Safari.

Ссылка на JSFiddle

Две строки первой таблицы показаны одна за другой, т.е. зеленая строказадвигается, затем выдвигается, подсвечивая желтый ряд, чтобы скользить внутрь. Через пару секунд желтый ряд выдвигается, а затем зеленый возвращается.После того, как зеленый возвращается в исходное положение.

Два деления внизу скользят одновременно.Теперь, что происходит, я делаю зеленую строку абсолютной после того, как она выдвигается, так что желтая строка перемещается вверх в той же позиции, но в Safari, «позиция: абсолютная» в зеленой строке не применяется.

@-webkit-keyframes slideRightDisappear {
    0% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    99% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        position: absolute;
    }
}

@keyframes slideRightDisappear {
    0% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    99% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        position: absolute;
    }
}

Желтая строка также, когда выдвигается, не занимает абсолютную позицию, чтобы вытянуть два нижних деления вверх. 

@-webkit-keyframes slideLeftDisappear {
    0% {
        display: inline;
        opacity: 1;
    }
    99% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
    100% {
        position: absolute;
        opacity: 0;
    }
}

@keyframes slideLeftDisappear {
    0% {
        display: inline;
        opacity: 1;
    }
    99% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
    100% {
        position: absolute;
        opacity: 0;
    }
}

Кроме того, два деления внизу не анимируются ипросто внезапно появляются.

Проверьте скрипку в Chrome, вот как в идеале она должна работать, а затем проверьте ее в Safari для основной проблемы.

Не смущайтесь тем, как я делаю инъекциюанимация, мое требование заключается в том, что я хочу связать несколько анимаций, запускать и останавливать их по требованию, поэтому я передаю список свойств анимации, присоединяю их по отдельности и добавляю в стиль DOM.Ранее я конкатенировал стенографию, но, очевидно, Safari не учитывает стенографию, поэтому я пошел дальше и разделил каждую анимацию на ее свойства.

Кроме того, еще одна проблема, которую я не могу воспроизвести, - это когда я нажимаю накнопка анимации, все мои анимации запускаются одновременно, игнорируя задержку, которую я даю. 

function animator () {
  addAnimationToElement('row-1', ['fadeInLeftBig', 'slideRightDisappear', 'slideLeftAppear'], ['0.5s', '0.3s', '0.5s'], ['linear', 'linear', 'linear'], ['0.6s', '3s', '7.5s'], ['1', '1', '1'], ['normal', 'normal', 'normal'], ['forwards', 'forwards', 'forwards'], ['running', 'running', 'running'])

addAnimationToElement('row-2', ['slideInLeft', 'slideLeftDisappear'], ['0.5s', '0.5s'], ['linear', 'linear'], ['4s', '6.5s'], ['1', '1'], ['normal', 'normal'], ['forwards', 'forwards'], ['running', 'running'])

addAnimationToElement('table', ['fadeInLeftBig'], ['1.5s'], ['cubic-bezier(0.215, 0.61, 0.355, 1)'], ['9s'], ['1'], ['normal'], ['forwards'], ['running'])

addAnimationToElement('chart', ['fadeInRightBig'], ['1.5s'], ['cubic-bezier(0.215, 0.61, 0.355, 1)'], ['9s'], ['1'], ['normal'], ['forwards'], ['running'])
  
}

function pause () {
	document.getElementById('portfolio').style.opacity = 0;
}


function addAnimationToElement (elementID, animationName, animationDuration, animationTimingFunction, animationDelay, animationIterationCount, animationDirection, animationFillMode, animationPlayState) {
      // Animation for Safari
      document.getElementById(elementID).style.WebkitAnimationName = animationName.join(', ')
      document.getElementById(elementID).style.WebkitAnimationDuration = animationDuration.join(', ')
      document.getElementById(elementID).style.WebkitAnimationTimingFunction = animationTimingFunction.join(', ')
      document.getElementById(elementID).style.WebkitAnimationDelay = animationDelay.join(', ')
      document.getElementById(elementID).style.WebkitAnimationIterationCount = animationIterationCount.join(', ')
      document.getElementById(elementID).style.WebkitAnimationDirection = animationDirection.join(', ')
      document.getElementById(elementID).style.WebkitAnimationFillMode = animationFillMode.join(', ')
      document.getElementById(elementID).style.WebkitAnimationPlayState = animationPlayState.join(', ')
      // Animation for other browsers
      document.getElementById(elementID).style.animationName = animationName.join(', ')
      document.getElementById(elementID).style.animationDuration = animationDuration.join(', ')
      document.getElementById(elementID).style.animationTimingFunction = animationTimingFunction.join(', ')
      document.getElementById(elementID).style.animationDelay = animationDelay.join(', ')
      document.getElementById(elementID).style.animationIterationCount = animationIterationCount.join(', ')
      document.getElementById(elementID).style.animationDirection = animationDirection.join(', ')
      document.getElementById(elementID).style.animationFillMode = animationFillMode.join(', ')
      document.getElementById(elementID).style.animationPlayState = animationPlayState.join(', ')
    }
.transparent_element {
	opacity: 0;
}

#row-1 {
  width: 300px;
  height: 100px;
  display: block;
  background-color: green;
}

#row-2 {
  width: 300px;
  height: 100px;
  display: block;
  background-color: yellow;
}

#table {
  width: 150px;
  height: 150px;
  background-color: red;
  display: inline-block;
}

#chart {
  width: 150px;
  height: 150px;
  background-color: blue;
  position: absolute;
  right: 0;
  display: inline-block;
}


@-webkit-keyframes slideLeftAppear {
	0% {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
		-webkit-transform: translate3d(100%, 0, 0);
	}
	100% {
		transform: translate3d(0, 0,);
		-webkit-transform: translate3d(0);
		position: relative;
		display: block;
		opacity: 1;
	}
}

@keyframes slideLeftAppear {
	0% {
		opacity: 0;
		transform: translateX(100%);
		-webkit-transform: translateX(100%);
	}
	100% {
		transform: translateX(0);
		-webkit-transform: translateX(0);
		position: relative;
		display: block;
		opacity: 1;
	}
}

@-webkit-keyframes slideRightDisappear {
	0% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	99% {
		transform: translateX(100%);
		-webkit-transform: translateX(100%);
	}
	100% {
		position: absolute;
	}
}

@keyframes slideRightDisappear {
	0% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	99% {
		transform: translateX(100%);
		-webkit-transform: translateX(100%);
	}
	100% {
		position: absolute;
	}
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(400px, 0, 0);
    transform: translate3d(400px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(400px, 0, 0);
    transform: translate3d(400px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slideLeftDisappear {
	0% {
		display: inline;
		opacity: 1;
	}
	99% {
		transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
	}
	100% {
		position: absolute;
		opacity: 0;
	}
}

@keyframes slideLeftDisappear {
	0% {
		display: inline;
		opacity: 1;
	}
	99% {
		transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
	}
	100% {
		position: absolute;
		opacity: 0;
	}
}
<div>

<button onclick="animator()">
Animate
</button>
<button onclick="pause()">
Pause
</button>
<table>
<tr id="row-1" class="transparent_element" style="-webkit-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); -moz-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75);  height: 90px;">
  </tr>
<tr id="row-2" class="transparent_element" style="-webkit-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); -moz-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75);  height: 90px;">
  </tr>          
</table>

<div id="table" class="transparent_element"></div>
<div id="chart" class="transparent_element"></div>

</div>
</div>

Любая идея или предложение будут высоко оценены.

Заранее спасибо!

...