创建自己的类

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