HTML Wie kann ich das Entfernen eines Elments verzögern?

IKäsebrot

Ensign
Registriert
Juni 2014
Beiträge
245
Hallo,

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.
 
Hast du die Möglichkeit auf jQuery zurückzugreifen?
 
Code:
.element {
 display: none;
}

Lässt das Element ganz verschwinden. Du kannst das per Skript entweder über eine Zeitspanne oder über eine Zwischenabfrage ("Ist das Element gedreht?","Dann...") bewerkstelligen.

jQuery
ist ein JavaSciprt-Framework. Solltest du die ganze Seite selbst programmieren scheint es wohl nicht geladen zu werden, ansonsten den Quelltext mal nach "jquery" durchsuchen. Für solche Arbeiten kann ich es nur wärmstens empfehlen. Jedoch wenn du nur eine Animation hast kann man auch drauf verzichten.
 
Zuletzt bearbeitet:
Ok ich geb zu ich war zu faul mich für eine schnelle Lösung in jQuery einzuarbeiten. Habe aber eine Lösung gefunden die vielleicht nicht so sauber ist aber funktioniert :D

Code:
document.getElementById(clicked_id).classList.toggle("hover"); 

window.setTimeout(function () { RemoveElement(clicked_id);}, 601);

        function RemoveElement(element_id)
        {
            var div = document.getElementById(element_id);
            if (div) {
                div.parentNode.removeChild(div);
            }
        }

Die Funktion setTimeout verzögert die Ausführung der übergebenen Methode um den angegebenen Zeitraum.

Trotzdem danke, werde mich bei Gelegenheit mit jQuery befassen.
 
Zurück
Oben