Как сбросить CSS переход после воспроизведения - PullRequest
Новая
       143

Как сбросить CSS переход после воспроизведения

5 голосов
/ 12 июля 2020

У меня есть знак плюса, который появляется, если вы sh нажимаете кнопку пробела. Но теперь он появляется однажды. Можете ли вы помочь мне сделать так, чтобы он появлялся каждый раз, когда я нажимаю кнопку пробела? Вот моя Code Pen . 

import './style.scss';

let counter = 0;

document.addEventListener('keydown', ({ keyCode }) => {
  const increment = document.getElementsByClassName('increment')[0];
  if (keyCode === 32) {
    counter++;
    document.getElementsByClassName('counter')[0].innerText = counter;

    increment.classList.remove('hidden');
    increment.classList.add('move-increment');
  }
});

.container {
   /* ... */

  .counter {
    background-color: gray;
    color: white;
    border-radius: 10px;
    padding: 10px;
  }

  .move-increment {
    margin-top: -20px;
    opacity: 0;
  }

  .hidden {
    visibility: hidden;
  }

  .increment {
    position: absolute;
    margin-left: -33px;
    z-index: 1;
    transition: margin-top 1s cubic-bezier(0, 0.5, 0.5, 1),
      opacity 1s ease-in-out;
  }
}

Ответы [ 3 ]

3 голосов
/ 13 июля 2020

Хотя я считаю ответ @ ikiK правильным, потому что вопрос был конкретно об использовании переходов CSS, я хотел бы поделиться другим подходом. Я думаю, что цель значка «плюс» - отображаться каждый раз, когда счетчик увеличивается. Но когда счетчик увеличивается, а переход к предыдущему приращению все еще воспроизводится, невозможно отобразить второй символ «плюс».

Я предлагаю использовать некоторые jQuery и на каждом приращении добавлять новый li элемент в неупорядоченном списке, который располагается прямо над счетчиком. Анимируйте этот li, растушевывая его до самого верха. А затем используйте функцию обратного вызова animate(), чтобы удалить элемент li из DOM, как только он исчезнет из поля зрения. 

let counter = 1;
$(document).on( 'keypress',function(e) {
    if( e.which == 32 ) {
        $('.counter').text(counter++);
        let increment = $('<li><span class="increment">+</span></li>');
        $('#increments').append(increment);
        increment.animate({
            opacity: 0,
            top: '-=30px'
        }, 500, function() {
            increment.remove();
        });
    }
});
.container {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    font-weight: bold;
    display: flex;
    height: 500px;
    align-items: top;
    justify-content: center;
    position: relative;
  overflow: hidden;
  height: 100px;
}

.counter {
    background-color: gray;
    color: white;
    border-radius: 10px;
    padding: 10px;
}

#increments {
    padding: 0px;
    z-index: 1;
    float: left;
    margin-left: -33px;
    list-style: none;
}

#increments li {
    position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <p>Counter: <span class="counter">0</span></p>
    <ul id="increments"></ul>
</div>
1 голос
/ 12 июля 2020

Удалить добавленные .move-increment и добавить снова удаленные hidden классы с небольшой задержкой, это повторно применит ваши transition: margin-top (читайте в предоставленных ссылках, почему задержка): 

    setTimeout(function() {increment.classList.add('hidden');
    increment.classList.remove('move-increment');}, 600);

Решение (изменено клавиша-код для стрелки вверх: ↑): 

let counter = 0;

document.addEventListener('keydown', ({
    keyCode
  }) =>

  {
    const increment = document.getElementsByClassName('increment')[0];
    if (keyCode === 38) {
      counter++;
      document.getElementsByClassName('counter')[0].innerText = counter;

      increment.classList.remove('hidden');
      increment.classList.add('move-increment');

      setTimeout(function() {
        increment.classList.add('hidden');
        increment.classList.remove('move-increment');
      }, 600);
    }
  });
.container {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: bold;
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: center;
}

.counter {
  background-color: gray;
  color: white;
  border-radius: 10px;
  padding: 10px;
}

.move-increment {
  margin-top: -20px;
  opacity: 0;
}

.hidden {
  visibility: hidden;
}

.increment {
  position: absolute;
  margin-left: -33px;
  z-index: 1;
  transition: margin-top 1s cubic-bezier(0, 0.5, 0.5, 1), opacity 1s ease-in-out;
}
<div class="container">
  <div>
    Counter: <span class="counter">0</span>
    <span class="increment hidden">+</span>
  </div>
</div>

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

В предоставленных ссылках у вас есть примеры, как сбросить анимацию (не переход) вместе и решить эту проблему быстрого нажатия клавиш.

Прочтите об этом здесь, немного полезной информации:

Перезапуск CSS Анимация

Управление CSS Анимациями и переходами с помощью JavaScript

0 голосов
/ 13 июля 2020

Я думаю, вам не нужен скрытый класс, просто вы можете использовать setTimeout для класса сброса, например: 

let counter = 0;

document.addEventListener("keydown", ({ keyCode }) => {
  const increment = document.getElementsByClassName("increment")[0];
  if (keyCode === 32) {
    counter++;
    document.getElementsByClassName("counter")[0].innerText = counter;
    increment.classList.add("move-increment");
    setTimeout(function () {
      increment.classList.remove("move-increment");
    }, 1000);
  }
});
.container {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 40px;
     font-weight: bold;
     display: flex;
     height: 500px;
     align-items: center;
     justify-content: center;
}
 .container .counter {
     background-color: gray;
     color: white;
     border-radius: 10px;
     padding: 10px;
}
 .container .increment {
     position: absolute;
     margin-left: -33px;
     z-index: 1;
     visibility: hidden;
     margin-top: 0;
     opacity: 1;
     transition: margin-top 1s cubic-bezier(0, 0.5, 0.5, 1), opacity 1s ease-in-out;
}
 .container .increment.move-increment {
     visibility: visible;
     margin-top: -20px;
     opacity: 0;
}
 
 <div class="container">
   <div>
     Counter: <span class="counter">0</span>
     <span class="increment">+</span>
   </div>
 </div>
...