創建自己的類

Question

我一直在試圖建立兩個標誌之間的淡入淡出效果兩個圖像之間的淡入淡出效果。他們互換，但看起來不太好。任何人都可以告訴我最好的方法來做到這一點？

這裏是我的代碼：

.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

的問題在於display:none;財產。它不支持動畫。最好的辦法是使用opacity來代替。

見下文：

.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; 
} 

---編輯

如果標誌的應該是在彼此的頂部，你要考慮他們都掉進一個DIV /包裝和周圍亂與職位。

---編輯2

我想補充一些澄清（註釋中提到的），記得改變一個元素的透明度不會影響它的顯示狀態，除去display:none/block性能。

Answer 2

您的問題是display不是可轉換特性。嘗試使用opacity代替淡入淡出效果。如果你想等第一個在淡入第二個之前淡出，那麼就玩transition-duration屬性。

邊注：最好避免使用alltransition-property只要有可能。另外，你可能不需要所有的前綴;當前只有一個瀏覽器需要transition屬性的前綴。查詢caniuse.com瞭解更多關於哪些瀏覽器可能需要作爲前綴的信息。

.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; 
}