html - 使用自己的类在两个图像之间创建淡入淡出效果

我一直试图在两个徽标之间创建淡入淡出效果。他们交换，但看起来并不好。谁能告诉我最好的方法吗？

这是我的代码：

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

最佳答案

问题在于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属性，因为更改元素的不透明度不会影响其显示状态。

关于html - 使用自己的类在两个图像之间创建淡入淡出效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36932326/