Erstellen eines Fade-Effekts zwischen zwei Bildern mit ihren eigenen Klassen

Question

Ich habe versucht, einen Fade-Effekt zwischen zwei Logos zu erstellen. Sie tauschen, aber es sieht nicht gut aus. Kann mir jemand den besten Weg empfehlen, dies zu tun?

Hier ist mein Code:

.header.affix .logo-second { 
 
    display: block; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    -ms-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
} 
 

 
.header.affix .logo-first{ 
 
    display: none; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -moz-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    -ms-transition: all 0.5s ease-in-out; 
 
    transition: all 0.5s ease-in-out; 
 
}

<a data-scroll href="#home" id="brand" class="navbar-brand" style="padding-right: 100px;"> 
 
    <!-- 
 
     The URLs in the src attributes below have been replace by data: URLs 
 
     for demostration purposes 
 
    --> 
 
    <img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="background: red"/>' class="logo-first" alt=""> 
 
    <img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="background: green"/>' class="logo-second" style="width: 70%; padding-top: 15px;"> 
 
</a>

Answer 1

Das Problem liegt bei der display:none; Eigenschaft. Es unterstützt keine Animation. Der beste Weg, um dies zu tun wäre, stattdessen opacity zu verwenden.

Siehe unten:

.header.affix .logo-second { 
    opacity:1; 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 

.header.affix .logo-first{ 
    opacity:0; 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 

--- bearbeiten

Wenn das Logo der angeblich auf der jeweils anderen sein, Sie beide in ein div/Wrapper und Chaos fallen, sie zu prüfen, um mit Positionen.

--- bearbeiten 2

Nur eine Klarstellung hinzuzufügen (in den Kommentaren erwähnt) erinnern sich an die display:none/block Eigenschaften wie die Änderung der Opazität eines Elements zu entfernen, wirkt sich nicht, es ist Anzeigezustand.

Answer 2

Ihr Problem ist, dass display keine übergangsfähige Eigenschaft ist. Verwenden Sie stattdessen opacity, um einen Fade-Effekt zu erhalten. Wenn Sie darauf warten möchten, dass der erste ausklingt, bevor Sie den zweiten einblenden, spielen Sie einfach mit der Eigenschaft transition-duration herum.

Seitennotiz: Am besten vermeiden Sie die alltransition-property wann immer möglich. Außerdem benötigen Sie wahrscheinlich nicht alle Präfixe; Derzeit benötigt nur ein Browser Präfixe für die Eigenschaften transition. Überprüfen Sie caniuse.com für weitere Informationen darüber, für welche Browser Sie möglicherweise ein Präfix benötigen.

.header .logo-first,.header .logo-second{ 
    transition:opacity .5s ease-in-out; 
} 
.header.affix .logo-first,.header .logo-second{ 
    opacity:0; 
} 
.header.affix .logo-second{ 
    opacity:1; 
}