Создание эффекта затухания между двумя изображениями с их собственными классами

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