Safari 12 CSS анимации не работают - PullRequest
Новая
       10

Safari 12 CSS анимации не работают

0 голосов
/ 09 ноября 2018

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

В Chrome и Firefox все работает хорошо, даже в Safari 11 работает хорошо, но в Safari 12 анимация работает плохо.

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

enter image description here

Вы можете посмотреть на проблему здесь: https://codepen.io/crysfel/pen/GwoQxE (Обязательно откройте ссылку с помощью safari 12)

Мне кажется, что CSS довольно стандартен: 

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  opacity:0;
  transform: translateY(60px);
  animation: slideIn ease 1;
  animation-fill-mode: forwards;
  animation-duration: 175ms;
}

И простой javascript для анимации предметов один за другим: 

function animateIn() {
  $('ul li').each(function(index) {
    $(this).removeClass('slide-in');
    setTimeout(() => {
      $(this).addClass('slide-in');
    }, 50 * index)
  })
}


$(() => {

  animateIn();

  $('#show').click(function() {
    animateIn();  
  });
});

EDIT:

Я исправил проблему : Оказывается, все, что мне нужно было сделать, это удалить transform: translateY(60px); из slide-in. Видимо, сафари использовал этот стиль в конце анимации, перезаписывая окончательное значение. Это очень странно, потому что визуально выглядит неправильно, но с активными зонами все в порядке.

1 Ответ

0 голосов
/ 09 ноября 2018

Возможно, вам понадобится добавить префикс к ключевым кадрам и анимацию для сафари. Используйте что-то вроде этого: 

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@-webkit-keyframes slideIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(60px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
.slide-in {
  opacity:0;
  transform: translateY(60px);
  -webkit-transform: translateY(60px);
  animation: slideIn ease 1;
  -webskit-animation: slideIn ease 1;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-duration: 175ms;
  -webkit-animation-duration: 175ms;
}

Полезный инструмент для использования: shouldiprefix.com

...