2

У меня вопрос:

Я использовал псевдокласс :activate для старта анимации (.b-menu:activate{), возникла проблема: анимация проигрывалась, но ТОЛЬКО когда пользователь зажимал кнопку, мне же нужно, что бы он один раз нажал (не зажал, а именно нажал и отпустил) и анимация проигралась.

Надеюсь на вашу помощь.

Код:

 @keyframes menu{
10%{
position: relative;
bottom: 24px;
transform: rotate(36deg);}
20%{
position: relative;
bottom: 48px;
transform: rotate(72deg);}
30%{
position: relative;
bottom: 72px;
transform: rotate(108deg);}
40%{
position: relative;
bottom: 96px;
transform: rotate(144deg);}
50%{
position: relative;
bottom: 120px;
transform: rotate(180deg);}
60%{
position: relative;
bottom: 144px;
transform: rotate(216deg);}
70%{
position: relative;
bottom: 168px;
transform: rotate(252deg);}
80%{
position: relative;
bottom: 192px;
transform: rotate(288deg);}
90%{
position: relative;
bottom: 216px;
transform: rotate(325deg);}
100%{
position: relative;
bottom: 240px;
transform: rotate(360deg);}
}
.b-menu:active{
animation: menu 0.7s;
}
4
  • 2
    Лучше код покажи... Все что выше описано, без проблем можно реализовать...
    – Air
    16 апр 2018 в 14:52
  • Хорошо. Добавил код. 16 апр 2018 в 15:02
  • Возможный дубликат вопроса: Возможность остановить анимацию css 16 апр 2018 в 15:03
  • 1
    Vadizar, эта тема отвечает только на 2 моих вопроса из 3. Остался последний вопрос. 16 апр 2018 в 15:07

2 ответа 2

2

Вы забыли задать свой вопрос.
Но если я верно понял суть, то JS так-то не нужен в данном случае...
Атрибут tabindex + псевдокласс :focus = решение на одной лишь CSS.

#container {
  display: flex; justify-content: space-around; 
  padding-top: 35px; 
  overflow: hidden; 
  border-bottom: 1px solid #aaa; 
}

.test {
  flex: 0 0 100px; height: 100px; 
  background: linear-gradient(#ef4, #2a4); 
  transform: rotate(-180deg) translateY(-80%); 
  transition: transform 0.5s ease-in; 
  outline: none;
}
.test:focus {
  transform: none; 
  transition-timing-function: ease-out; 
}
<div id="container">
  <div class="test" tabindex="1"></div>
  <div class="test" tabindex="2"></div>
  <div class="test" tabindex="3"></div>
</div>

1
  • отличный ответ! 17 апр 2018 в 7:09
1

Через добавление класса. jsfiddle

var div = document.querySelector("div");

div.onclick = function() {
  this.classList.toggle("bottom");
};
div {
  position: relative;
  bottom: 0;
  width: 150px;
  height: 150px;
  background-color: red;
  transition: .3s;
}

.bottom {
  bottom: -50px;
  transition: .3s;
}
<div></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.