Как сделать такой эффект для блоков?
!!Это не реклама, нужна помощь в таком эффекте
в конце блок получает такой стиль
style="transform: translate(-670px, -1005px) rotate(-1.0472rad); display: none;"
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКак сделать такой эффект для блоков?
!!Это не реклама, нужна помощь в таком эффекте
в конце блок получает такой стиль
style="transform: translate(-670px, -1005px) rotate(-1.0472rad); display: none;"
Добиться данного эффекта можно с помощью комбинации css transform
и transition
.
function changeClass(className) {
square.classList.add(className);
}
square.addEventListener('transitionend', function() {
square.classList.remove(...square.classList);
});
#square {
width: 200px;
height: 200px;
background-color: red;
}
.decline {
transform: translate(-100%, -100%) rotate(-1.0472rad);
transition: transform 1s ease;
}
.accept {
transform: translate(100%, -100%) rotate(1.0472rad);
transition: transform 1s ease;
}
<div id="square"></div>
<button onclick="changeClass('decline')">decline</button>
<button onclick="changeClass('accept')">accept</button>
transitionend
? Оно возникает, когда анимация заканчивается. Можете написать любой код туда. Спасибо принимается в виде принятого ответа :)
11 фев 2020 в 12:57