Hallo,
ich habe eine css-Animation deklariert (copy-paste) die dreht ein element um 180°.
Das möchte ich bei onClick auslösen und es funktioniert auch. Jetzt will ich aber, dass das Element nach der Animation verschwindet:
Leider verschwindet das Element bevor die Animation abgespielt wurde. Kann ich das irgenwie verzögern? Seid bitte nicht zu hart bin blutiger HTML/JS-Anfänger und habe mir das meiste im www zusammengesucht.
ich habe eine css-Animation deklariert (copy-paste) die dreht ein element um 180°.
Code:
/* entire container, keeps perspective */
.flip-container {
perspective: 100px;
}
/* flip the pane when hovered */
.flip-container:checked .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 100px;
height: 100px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
Das möchte ich bei onClick auslösen und es funktioniert auch. Jetzt will ich aber, dass das Element nach der Animation verschwindet:
Code:
document.getElementById(clicked_id).classList.toggle("hover");
var div = document.getElementById(clicked_id);
if (div) {
div.parentNode.removeChild(div);
}
Leider verschwindet das Element bevor die Animation abgespielt wurde. Kann ich das irgenwie verzögern? Seid bitte nicht zu hart bin blutiger HTML/JS-Anfänger und habe mir das meiste im www zusammengesucht.