Как запустить анимацию CSS по клику и запустить анимацию в обратном порядке по второму клику? - PullRequest
Новая
       35

Как запустить анимацию CSS по клику и запустить анимацию в обратном порядке по второму клику?

0 голосов
/ 05 июня 2019

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

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

Я создал квадратный div и разместил его в верхнем правом углу моего меню.Моя цель на данный момент состоит в том, чтобы фон исчезал, когда я нажимал на эту кнопку.Кнопка теперь зеленая, но это временно.Я буду анимировать остальную часть меню, когда я теперь, как запустить анимацию при нажатии.

Я уже много пытался решить эту проблему, но это просто не работает.Я надеюсь, что вы можете помочь мне!

Ниже приведен код, который у меня сейчас есть.Я не добавил код, который не имеет отношения к этому вопросу.

Меню также должно закрываться при повторном нажатии кнопки, поэтому анимация должна работать в обратном порядке.Как я могу лучше всего это сделать?

Спасибо!Ralph

index.html 

</div>
    <div class="dsgn-header">
        <div class="dsgn-header-menu-opened">
            <div class="dsgn-header-menu-opened-background"></div>
            <div class="dsgn-header-menu-opened-menuitems"></div>
        </div>

    <div class="dsgn-header-logo">
        <p class="dsgn-header-title">Site title</p>
    </div>
    <div class="dsgn-header-menu-mobile">
        <div class="dsgn-header-rectangle-up"></div>
        <div class="dsgn-header-rectangle-down"></div>
    <div class="dsgn-header-button" onclick="ani()" ></div>
</div>

header.css 

.dsgn-header {
  width: 100vw;
  height: 88px;
  margin-left: 0px;
  background-color: white;
}



/* Logo */

@media (max-width: 350px) {
  .dsgn-header-logo {
    position: absolute;
    left: 16px;
    top: 27px;
  }
}
@media (min-width: 351px) {
  .dsgn-header-logo {
    position: absolute;
    left: 28px;
    top: 27px;
    width: 75%;
    max-width: 500px;
  }
}

.dsgn-header-title {
  color: #FF0000;
  font-size: 28px;
  font-family: 'Playfair Display', serif;
}


/* Menu animation */

.dsgn-header-rectangle-up {
  position:absolute;
  width:40px;
  height:1px;
  background:grey;
  right:28px;
  top:40px;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: dsgn-header-rectangle-up;
  animation-duration: 1s;
}

.dsgn-header-rectangle-down {
  position:absolute;
  width:40px;
  height:1px;
  background:grey;
  right:28px;
  top:54px;
  -webkit-animation-name: dsgn-header-rectangle-down; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: dsgn-header-rectangle-down;
  animation-duration: 1s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* Let op de ease in ease out en de animation iteration */


/* Menu opened */

.dsgn-header-menu-opened-background-active {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 100vh;
background-color: black;
 -webkit-animation-name: menu-background; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: menu-background;
  animation-duration: 1s;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes menu-background {
  0%   {
opacity: 0;
}
  100%   {
opacity: 1;
}
}

/* Standard syntax */
@keyframes menu-background {
  0%   {
opacity: 0;
}
  100%   {
opacity: 1;
}
}



.dsgn-header-menu-opened-menuitems {
  position: absolute;
  left: 45px;
  top: 150px;
  width: 75%;
  background-color: grey;
}

.dsgn-header-button {
position: absolute;
top: 0px;
right: 0px;
width: 88px;
height: 88px;
background-color: green;
}

Javascript: 

$('#dsgn-header-button').onClick(function(){
    $('#dsgn-header-menu-opened-background').addClass('.dsgn-header-menu-opened-background-active');
});

1 Ответ

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

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

Но, тем не менее, вот решение: 

const demo = document.querySelector('.demo');
const button = document.querySelector('button');

let reverse = false;

button.addEventListener('click', onClickPlay);

function onClickPlay(){
  // Save the animation state
  let animation = demo.style.animation;
  
  // Clear the animation
  demo.style.animation = 'none';
  
  // You need to call this at next draw call to make the animation take effects
  setTimeout(()=>{
    // Restore the animation
    demo.style.animation = animation;
    // Make the animation running
    demo.style.animationPlayState = 'running';
    // Set the animation direction by current state
    demo.style.animationDirection = reverse ? 'reverse' : 'normal';
    // Flip the state
    reverse = !reverse;
    button.innerText = reverse ? 'Reverse' : 'Forward';
  }, 0);
}
@keyframes anim {
  0% {
    width: 0px;
    background-color: red;
  }
  
  100% {
    width: 100px;
    background-color: blue;
  }
}

.demo {
  /* Make the animation paused at the beginning */
  animation: anim 1s paused both;
  width: 0px;
  height: 20px;
}
<button>Forward</button>
<div class="demo"><div>
...