CSS transition fade element

Möchte ich so blenden Sie ein element sichtbar und unsichtbar.

Ich weiß, ich kann dies tun, indem Sie:

element {
  opacity:1;
}

element.fade {
  opacity:0;
  transition: opacity .5s linear;
}

Das problem dabei ist, dass die (jetzt) unsichtbare element noch vorhanden ist, Platz wegnimmt.

Ich würde mich freuen, zu verblassen und dann ganz verschwinden, wie wenn display:none gesetzt wurde.

InformationsquelleAutor Pablo Fernandez | 2011-07-17
  1. 1

    Können Sie Haken die transitionEnd event und wenn dann noch der fade beendet ist, können Sie festlegen display: none im event-handler. Oder Sie können eine andere Art von übergang, endet mit dem element nehmen keinen Platz (wie die überführung der Höhe auf 0).

    Haken am Ende des übergangs, die Sie verwenden würden, so etwas wie dieses:

    //for webkit browsers
node.addEventListener('webkitTransitionEnd', function() {
        //set to display: none here
    }, false);

    Verwenden Sie andere Präfixe mit der transitionEnd-Ereignis für andere Browser.

    • Das webkit-nur, aber CSS übergänge werden unterstützt von allen gängigen Browsern jetzt.
    • ja, Sie müssen, verwenden Sie das entsprechende browser-spezifische Präfix mit der transtionEnd Veranstaltung.
    InformationsquelleAutor jfriend00
  2. 1

    Legen Sie eine javascript-timeout bei 0,5 s und dann fügen Sie einfach die zusätzliche css -

    var element = document.getElementsByClassName(fade)[0];
setTimeout(function() {        
    element.style.display="none"; 
}, 500);
    InformationsquelleAutor cmplieger
Schreibe einen Kommentar