Странная проблема CSS3-анимации в IE11 и Edge - PullRequest
Новая
       110

Странная проблема CSS3-анимации в IE11 и Edge

0 голосов
/ 27 сентября 2019

Я сделал CSS3-анимацию, она хорошо работает в Firefox и Chrome, но в IE11 и Edge она работает по-разному.

Я не смог решить проблему, потому что сложно отладить CSS3-анимацию с помощью IE Developer Tools,Эта проблема также возникает в Edge (но я думаю, что моя версия Edge устарела, поэтому, пожалуйста, попробуйте воспроизвести эту проблему только в IE11. Исправление, вероятно, будет работать на обоих).

Вот как я хочуанимация для просмотра (работает на Chrome / Firefox):

enter image description here

Вот как по-разному анимируется в IE11:

enter image description here

Код:

HTML: 

<div class="block"></div>
<span>click</span>

CSS: 

span {
  width: 50px;
  height: 50px;
  background: red;
  font-size: 50px;
}
.block {
  position: fixed;
  height: 0%;
  bottom: 0;
  width: 100%;
  top: auto;
  display: block;
  background-color: #0B0B0B;
  z-index: 99999;
  animation-fill-mode: both;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}

.animate-up {
    animation-name: overlayEffectUp;
  }


@keyframes overlayEffectUp {
  0% {
    bottom: 0;
    top: auto;
    height: 0%;
  }

  35%,
  65% {
    height: 100%;
  }

  100% {
    bottom: auto;
    top: 0;
    height: 0%;
  }
}

JavaScript (С jQuery): 

$('span').on('click', function() {
    $('.block').addClass('animate-up')
})

Вот демонстрационная ссылка: https://jsfiddle.net/zoq9h7xp/3/

Пожалуйста, любая помощь будет оценена!

1 Ответ

1 голос
/ 27 сентября 2019

Edge, кажется, глючит с position: fixed.Предположительно переключение между top: 0 и top: auto (и та же история со свойством bottom) вызывает такое поведение.

Если вам необходимо сохранить позицию fixed, вы можете попытаться анимировать с помощью transform собственность.Измените ваши наборы правил следующим образом: 

@keyframes overlayEffectUp {
    0% {
        transform: translateY(100%); // totally offscreen
    }

    35%,
    65% {
        transform: translateY(0%); // totally on screen from bottom
    }

    100% {
        transform: translateY(-100%); // totally off screen again to top
    }
}
.block {
    position: fixed;
    top:0;
    bottom:0;
    transform: translateY(100%);
    width: 100%;
    background-color: #0B0B0B;
    z-index: 99999;
    animation-fill-mode: both;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
}

Надеюсь, это поможет.Ура, Йерун

...