1
function changeButt() {
    document.getElementById("anyID").onclick = function () {

        const element = document.querySelector('.anyCSS');
        element.classList.toggle('animated');
    }
};
changeButt();

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

7
  • если при первом нажатии добавляется класс animated, то что должно произойти при втором? 27 апр 2019 в 13:18
  • @StrangerintheQ, соответственно он должен исчезать) Если не сложно, можно пример с сразу 2мя или более классами, за одну строку. (Пример: element.classList.toggle('animated', 'animated2', 'animated3');)
    – user310701
    27 апр 2019 в 13:27
  • исчезать один и появлятся второй, затем третий, четвертый итд и так по кругу? 27 апр 2019 в 13:31
  • @StrangerintheQ, у меня при нажатии на кнопку(img) происходит анимация самой кнопки, включение музыки, и появление через 'transform: translateY' анимации на css. Все работает как и необходимо, музыка, и появление анимации css включается и выключается по нажатию, но мне необходима чтобы анимация самой кнопки(img) происходила при каждом нажатии, а не раз за 2 нажатия. (skylikeit.xyz/code/code.txt)
    – user310701
    27 апр 2019 в 13:44
  • а анимация начинается и заканчивается в одной и той же точке? 27 апр 2019 в 13:46

1 ответ 1

0

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

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>

1
  • Спасибо большое, именно setTimeout получается мне и был необходим, теперь буду знать)
    – user310701
    27 апр 2019 в 14:07

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.