анимация ключевых кадров CSS - PullRequest
Новая
       1

анимация ключевых кадров CSS

0 голосов
/ 12 мая 2018

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

document.getElementById("button").addEventListener("click", function() {
  var x = document.getElementById("one");
  if (x.style.animation === "shrink .8s") {
    x.style.animation = "shrink .8s";
  } else {
    x.style.animation = "expand .8s";
  }
});
#one {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: black;
  animation: shrink .8s;
  animation-fill-mode: forwards;
  
  z-index: -1;
}

@keyframes expand {
  100% {
    top: 0;
  }
}

@keyframes shrink {
  100% {
    top: -100vh
  }
}
<button id="button">Click</button>

<div id="one"></div>

1 Ответ

0 голосов
/ 12 мая 2018

Проблема в том, что при изменении анимации она будет рассматриваться из начального состояния вашего элемента, а не из конечного состояния предыдущей анимации. Таким образом, у вас не будет ожидаемого результата при использовании анимации (даже если мы исправим ваш код JS, поскольку это не правильный способ проверки вашей анимации) 

document.getElementById("button").addEventListener("click", function() {
  var x = document.getElementById("one");
  x.classList.toggle('expand');
});
#one {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: black;
  animation: shrink .8s;
  animation-fill-mode: forwards;
  z-index: -1;
}

#one.expand {
  animation: expand .8s;
}

@keyframes expand {
  100% {
    top: 0;
  }
}

@keyframes shrink {
  100% {
    top: -100vh
  }
}
<button id="button">Click</button>

<div id="one"></div>

В таком случае лучше использовать переход, переключая один класс для изменения свойства top: 

document.getElementById("button").addEventListener("click", function() {
  var x = document.getElementById("one");
  x.classList.toggle('expand')
});
#one {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: black;
  top: -100vh;
  transition: all 1s;
  z-index: -1;
}

#one.expand {
  top: 0;
}
<button id="button">Click</button>

<div id="one"></div>
...