Анимация в css, псевдоклассы css, приостановка кода js

152

17 апреля 2018, 03:31

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

Я использовал псевдокласс :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;
}

Answer 1

Вы забыли задать свой вопрос.
Но если я верно понял суть, то 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>

Answer 2

Через добавление класса. 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; 
}