Как исправить «animation-fill-mode: forwards» в анимации слайдов? - PullRequest
Новая
       31

Как исправить «animation-fill-mode: forwards» в анимации слайдов?

1 голос
/ 20 июня 2019

Меню открывается, но после того, как оно возвращается влево -350 пикселей.Я хочу, чтобы меню оставалось слева: 0px, чтобы люди могли его видеть

Я пытался использовать animation-fill-mode: forwards, но, похоже, это не имеет никакого эффекта.Я также пробовал разные способы его анимации, например, увеличив ширину меню с 0 до 350 пикселей, но независимо от того, что я делаю, он не останется в последнем кадре анимации. 

.menu-button {
  position: absolute;
  left: 20px;
  cursor: pointer;
}

@keyframes slidein {
  0% {
    left: -350px;

  }

  100% {
    left: 0;
  }
}

.menu {
  display: none;
  position: fixed;
  top: 75px;
  left: -350px;
  width: 350px;
  height: 100vh;
  background-color: #81C784;
  border: 1px solid #004D40;
  border-left: none;
  border-bottom: none;
  z-index: 2;

}

.run-slidein {
  animation-name: slidein;
  animation-fill-mode: forwards;
}

.menu ul li {
  list-style-type: none;
  font-size: 32px;
  padding: 30px 0;
  text-align: center;
}

.menu--open {
  display: block;
}

const toggleMenu = () => {
  menu.classList.toggle('menu--open');

}

const toggleMenuAnimation = () => {
  menu.classList.toggle('run-slidein');
}



const menu = document.querySelector('.menu');



const menuButton = document.querySelector('.menu-button')


menuButton.addEventListener('click', function (event) {
  toggleMenu();
})

menuButton.addEventListener('click', function (event) {
  toggleMenuAnimation();
})

Я ожидаю, что анимация остановится на последнем кадре, но это не так.

...