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不是可转换的属性。尝试使用opacity来获得淡入淡出效果。如果你想在第二个淡出之前等待第一个消失，那么只需使用transition-duration属性即可。

附注：尽可能避免使用all transition-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;
}

Answer 2

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

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

2 个答案: