CSS3-Übergänge sind bei Verwendung der Anzeige deaktiviert: auch keine

Question

Ich habe anscheinend einen Fehler bei CSS3-Übergängen gefunden.Hoffentlich nicht.Hier ist das Dilemma.

.element a span {
   display:none;
   opacity:0;
   position:absolute;
   top:-10px;
   -webkit-transition-property:top, opacity;
   -webkit-transition-duration:500ms;

}
.element a:hover span {
   display:inline;
   opacity:0.8;
   position:absolute;
   top:10px;
}

Der Übergang funktioniert so überhaupt nicht.Wenn man das Attribut display: none entfernt, funktioniert es. In diesem Fall benötigen wir jedoch das Attribut display: none in unserem Link, damit vor dem Hover keine Schnittstelle hergestellt werden kann.

Irgendwelche Ideen?

Wunderbar

Answer 1

Sie könnten versuchen, einen Überlauf zu setzen: versteckt auf dem a, so sollte die Spanne unsichtbar erscheinen, ohne dass display verwendet werden muss: none;wie Sie es 10px nach oben verschoben haben.

oder anstelle der Anzeige: keine;Versuchen Sie, Sichtbarkeit zu verwenden: versteckt;

Answer 2

Ändern der Anzeige: Keine zur Anzeige: Inline macht die anderen Eigenschaften in Bezug auf Übergänge umstritten. Trennen Sie also die Anzeige: keine / Anzeige: Blockänderung von der Klassenänderung mit setTimeout. Der Browser muss sie als separate Änderungen anzeigen, um Ihren Übergang anwenden zu können. Leider bedeutet dies, dass Sie nicht nur: hover verwenden können, sondern beim Hover einen JS-Ereignishandler benötigen.

Insbesondere würde ich ein Inline-Stilattribut von style="display: none" verwenden, das Sie mit JS hinzufügen oder entfernen, und display: none aus dem Stylesheet entfernen.

Verwenden Sie dann in JS nach dem Entfernen von display: none (explizit oder über die Stilregel: hover pseudoclass) eine setTimeout-Funktion, die die Klasse explizit hinzufügt / entfernt. Auf diese Weise ist die Änderung "Dies ist Anzeige: Inline" eine diskrete, frühere überstreichbare Aktion aus den anderen Stileigenschaftsänderungen, auf die die Übergangsregeln angewendet werden sollen.

Ändern Sie in der entgegengesetzten Richtung die Klasse in einem Ereignishandler zurück und verwenden Sie eine setTimeout-Funktion, um display: none als Inline-Stil festzulegen. Das Timeout muss natürlich mit der Übergangsdauer übereinstimmen (damit angezeigt wird: Nach Abschluss des Übergangs erfolgt keine).

Answer 3

oder Sie können versuchen, Breite oder Höhe 0 in Kombination mit einem Überlauf zu verwenden, der auf dem unsichtbaren Element verborgen ist, damit keines der anderen Elemente gestört wird, während die Übergänge beibehalten werden.

dh

.element a span {
   overflow: hidden;
   height: 0;
   width: 0;
   opacity:0;
   position:absolute;
   top:-10px;
   -webkit-transition-property:top, opacity;
   -webkit-transition-duration:500ms;

}
.element a:hover span {
   overflow: visible;
   height: ???px;
   width: ???px;
   opacity:0.8;
   position:absolute;
   top:10px;
}

Answer 4

Ich würde mit JS gehen.CSS-Übergänge saugen mit Höhen. Hier ist, was ich verwendet habe, um eine Klick-Erweiterungsfunktion zu erstellen. Sie können einige Dinge ändern und dasselbe mit einem Hover tun

// Dropdown

$ (function () {

    // Target the ul sibling to keep it generic
    var selector = $('.dropdown article > ul').siblings().addClass('selector');

    selector.click(function(){
                var targetUl = $(this).siblings('ul');

                if (targetUl.hasClass('open')) {
                            targetUl.removeClass('open').slideUp();
                } else {
                            targetUl.slideDown().addClass('open');
                }
    });

});