function changeButt() {
document.getElementById("anyID").onclick = function () {
const element = document.querySelector('.anyCSS');
element.classList.toggle('animated');
}
};
changeButt();
Здравствуйте, при таком использовании, действие происходит по правилам тоглера, т.е. раз в 2 нажатия. Вопрос с том, как сделать так, чтобы смена css у элемента, происходила на onclick, т.е. при каждом нажатии?
Предлагаю так:
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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Изучал лекцию по стандартной библиотеке С++ и возник вопросХочу поддержать сигнатуру функционального объекта для ф-ии lessThan:
Есть окно MainWindow в котором есть label_1 и label_2 в label_1 каждую секунду должно прибавляться значение label_2К примеру в label_1 значение 0 а в label_2 значение...