Expand CSS3 анимация не работает

Question

У меня есть очень упрощенно наложения навигации, смотрите ниже:

<nav role="navigation" class="navigation"> 
    <a href="#" class="brand-logo"><img src="img/beer-jug-logo.png" alt="brand logo"></a> 
    <ul class="navigation-list"> 
     <li><a href="">Home</a></li> 
     <li><a href="">About</a></li> 
     <li><a href="">Design</a></li> 
     <li><a href="">Interiors</a></li> 
     <li><a href="">Contact</a></li> 
    </ul> 
    <a class="close"></a> 
</nav> 

Теперь я добавил очень простой CSS расширения и сокращения анимации и эти анимации переключаются с помощью JQuery. Код анимации ниже:

.navigation.shrinkMenu { 
    -webkit-animation-name: shrinkMenu; 
    -o-animation-name: shrinkMenu; 
    animation-name: shrinkMenu; 
    -webkit-animation-duration: 1s; 
    -o-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    -o-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 
.navigation.expandMenu { 
    -webkit-animation-name: expandMenu; 
    -o-animation-name: expandMenu; 
    animation-name: expandMenu; 
    -webkit-animation-delay: 3s; 
    -o-animation-delay: 3s; 
    animation-delay: 3s; 
    -webkit-animation-duration: 1s; 
    -o-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    -o-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 
@keyframes shrinkMenu { 
    90% { 
     opacity: 0; 
    } 
    99% { 
     left: 50%; 
     top: 50%; 
     bottom: 50%; 
     right: 50%; 
    } 
    100% { 
     opacity: 0; 
     visibility: hidden; 
     left: 50%; 
     top: 50%; 
     bottom: 50%; 
     right: 50%; 
    } 
} 
@keyframes expandMenu { 
    0% { 
     left: 50%; 
     top: 50%; 
     bottom: 50%; 
     right: 50%; 
    } 
    100% { 
     left: 0; 
     top: 0; 
     bottom: 0; 
     right: 0; 
    } 
} 

Начальные стили в меню ниже:

.navigation { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    /*background: rgba(244 ,41, 65,.9);*/ 
    background: rgba(255 ,255, 255,.9); 
    display: flex; 
    align-items:center; 
    justify-content:center; 
    flex-direction:column; 
    z-index: 999; 
} 

код JQuery для переключения видимости меню ниже:

$('.close').on('click', function() { 
    $('.navigation').addClass('shrinkMenu'); 
}); 
$('.H-menu').on('click', function() { 
    $('.navigation').addClass('expandMenu'); 
}); 

FIDDLE HERE

Теперь, если вы видите fi ddle или даже запустить анимацию в Chrome или FF, вы заметите, что анимация сжатия работает просто отлично, но анимация расширения крутая, I.E. он просто не работает. Может кто-нибудь объяснить, почему анимация не работает?

Answer 1

Примечание: Это не похоже на непростую проблему. Проблема возникает в Fiddle только тогда, когда она загружается в первый раз (путем указания URL-адреса в адресной строке и нажатия кнопки Go). Когда какое-либо редактирование делается в Fiddle, и мы просто «Run», ошибка не возникает. Я также не мог воссоздать проблему в Stack Snippet.

Нет проблем с кодом анимации или CSS. Проблема, похоже, связана с атрибутом href в теге a.H-menu. Когда этот атрибут указан и нет значения, кажется, что вся страница загружается при щелчке значка меню, и поэтому вы не видите анимацию.

Вы можете сделать одно из следующих действий:

• Набор href='#' и использовать e.preventDefault() внутри обработчика событий нажмите (или)
• Терпеть не атрибут href в a.H-menu тега.

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

---

Вы можете проверить, что я говорю, посетив следующие скрипки (просмотреть консоль на первую загрузке):

• Fiddle with original code - Откройте скрипку и откройте консоль немедленно. Отобразится сообщение об ошибке, указывающее, что изображение (beer-jug-logo.png) не может быть загружено. Удалите это сообщение об ошибке, закройте меню и щелкните значок, чтобы его снова открыть. Вы заметили бы, что ошибка снова отобразится (указывая, что она загружается повторно).
• Fiddle with href='#' - Выполняйте те же действия, что и выше, и заметите, что анимация работает правильно и что на консоли нет сообщения об ошибке при нажатии значка .H-menu.
• Fiddle with no href - Те же шаги, и вы заметите тот же результат, что и второй скрипт.