CSS3 - Übergang beim DOM-Entfernen

Mit keyframesist es möglich zu animieren ein element, sobald es eingefügt in die DOM. Hier einige Beispiel-CSS:

@-moz-keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

@-webkit-keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

#box {
    -webkit-animation: fadeIn 500ms;
    -moz-animation: fadeIn 500ms;
    animation: fadeIn 500ms;
}

Gibt es einige ähnliche Funktionen zur Verfügung, um eine animation (über CSS, kein JavaScript), um ein element, bevor es richtig wird aus dem DOM entfernt? Unten ist ein jsFiddle, das ich spielen, um mit dieser Idee; fühlen Sie sich frei, um die Gabel, wenn Sie wissen eine Lösung.

jsFiddle - http://jsfiddle.net/skoshy/dLdFZ/

InformationsquelleAutor der Frage Steve | 2011-08-09

  1. 14

    Erstellen Sie eine weitere CSS-animation genannt fadeOut sagen. Dann, wenn Sie möchten, entfernen Sie das element, ändern Sie die animation - Eigenschaft auf das element, dass die neuen Animationen, und verwenden Sie die animationend Ereignis zum auslösen der eigentlichen Entfernung des Elements, sobald die animation fertig ist:

    $('.hide').click(function() {
    if (!$(this).hasClass('disabled')) {
        $('#fill').css('-webkit-animation', 'fadeOut 500ms');
        $('#fill').bind('webkitAnimationEnd',function(){
            $('#fill').remove();
            $('.show, .hide').toggleClass('disabled');
        });
    }
});

    Siehe auch meine aktualisierte version der jsFiddle. , Dass funktioniert bei mir in Safari, mindestens.

    Gut, man sollte mit einer Klasse statt, die .css().

    Ich glaube nicht, dass jQuery hat keine "echte" Unterstützung für CSS-Animationen und dennoch, so denke ich nicht, dass Sie können loszuwerden, die webkitAnimationEnd. In Firefox ist es nur genannt animationend.

    Ich bin mir ziemlich sicher, dass es keine Möglichkeit gibt, dies zu tun in CSS.

    InformationsquelleAutor der Antwort mercator

  2. 6

    Habe ich gearbeitet, auf eine Komponenten-Bibliothek für javascript-und ich lief in dieses problem selbst. Ich habe den Vorteil, dass Sie in der Lage zu werfen eine Tonne von javascript auf das problem, aber da Sie bereits ein wenig, berücksichtigen Sie die folgenden für eine würdevoll erniedrigender Lösung:

    Auf Entfernung von Bauteilen/dom-Knoten, fügen Sie eine Klasse namens 'entfernen'.

    Dann in der css definieren Sie Ihre animation über die Klasse:

    .someElement.removing {
    -webkit-animation: fadeOut 500ms;
    -moz-animation: fadeOut 500ms;
    animation: fadeOut 500ms;
}

    Und wieder zurück in das javascript, nur, nachdem Sie 'entfernen', Klasse, sollten Sie in der Lage sein zu prüfen, für die "animation" - Eigenschaft des css, und wenn es vorhanden ist, dann wissen Sie, dass Sie Haken auf "animationEnd" und wenn nicht, dann entfernen Sie einfach das element sofort. Ich erinnere mich, testen Sie diese eine Weile zurück, sollte es funktionieren; ich werde sehen, ob ich kann Graben, bis Sie die Beispiel-code.

    Update:
    Ich habe gegraben, bis Sie diese Technik, und begann ein wirklich cooles plugin für jQuery, mit dem Sie CSS3-Animationen für DOM-Elemente, die entfernt werden. Kein zusätzliches Javascript erforderlich: http://www.github.com/arthur5005/jquery.motionnotion

    Es ist sehr experimentell, Benutzung auf eigene Gefahr, aber würde gerne etwas Hilfe und feedback. 🙂

    InformationsquelleAutor der Antwort Arthur Goldsmith

  3. -4

    ideal für so etwas wie fadeIN und fadeOUT Sie sollten mithilfe von css-transitions nicht css-Animationen..

    InformationsquelleAutor der Antwort Naman Goel

Schreibe einen Kommentar