Изменение css через js onclick

113
17 ноября 2020, 16:10
function changeButt() {
    document.getElementById("anyID").onclick = function () {
        const element = document.querySelector('.anyCSS');
        element.classList.toggle('animated');
    }
};
changeButt();

Здравствуйте, при таком использовании, действие происходит по правилам тоглера, т.е. раз в 2 нажатия. Вопрос с том, как сделать так, чтобы смена css у элемента, происходила на onclick, т.е. при каждом нажатии?

Answer 1

Предлагаю так:

document.getElementById("anyID").onclick = function () { 
    const element = document.querySelector('.anyCSS'); 
    element.classList.add('animated'); 
    setTimeout(() => element.classList.remove('animated'), 1000); 
}
.anyCSS { 
  width: 50px; 
  height: 50px; 
  background-color: wheat; 
  margin: 20px; 
  font-size: 30px; 
  text-align: center; 
  line-height: 50px; 
  cursor: pointer; 
  border-radius:50%; 
} 
 
.animated { 
    -webkit-animation-name: flip; 
    -webkit-backface-visibility: visible; 
    animation-name: flip; 
    backface-visibility: visible; 
    -webkit-animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-duration: 1s; 
    animation-fill-mode: both; 
} 
 
@keyframes flip{ 
 
0% { 
    -webkit-animation-timing-function: ease-out; 
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); 
    animation-timing-function: ease-out; 
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); 
} 
40% { 
    -webkit-animation-timing-function: ease-out; 
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); 
    animation-timing-function: ease-out; 
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); 
} 
50% { 
    -webkit-animation-timing-function: ease-in; 
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); 
    animation-timing-function: ease-in; 
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); 
} 
80% { 
    -webkit-animation-timing-function: ease-in; 
    -webkit-transform: perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg); 
    animation-timing-function: ease-in; 
    transform: perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg); 
} 
100% { 
    -webkit-animation-timing-function: ease-in; 
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); 
    animation-timing-function: ease-in; 
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); 
} 
}
<div id="anyID" class="anyCSS">?</div>

READ ALSO
Копирование блока

Копирование блока

как сделать что бы наведении на блок, на сайте предлагало копировать текст ?

143
Дождаться завершения потоков

Дождаться завершения потоков

В цикле запускаю n потоков

169
Сигнатура &lt;bool(int)&gt; с использованием std::placeholders::_2

Сигнатура <bool(int)> с использованием std::placeholders::_2

Изучал лекцию по стандартной библиотеке С++ и возник вопросХочу поддержать сигнатуру функционального объекта для ф-ии lessThan:

98
Как каждую секунду к label прибавлять какое то значение qt?

Как каждую секунду к label прибавлять какое то значение qt?

Есть окно MainWindow в котором есть label_1 и label_2 в label_1 каждую секунду должно прибавляться значение label_2К примеру в label_1 значение 0 а в label_2 значение...

136