Как заменить плавно логотипы?

Question

[Андрей]

Что то совсем не понимаю

<header class="header">
   <div class="logo">
			<div class="logo1">
				<a href="/"><img src="<?php the_field("logo1"); ?>" alt="logo"></a>
		 	</div>
			<div class="logo2">
                             <a href="/"><img src="<?php the_field("logo2"); ?>" alt="logo"></a>
                        </div>
		</div>
</header>

В общем, при прокрутке страницы header-у присваивается класс header-scroll
и не пойму каким образом один лого плавно сменить на другой при скролле
в любом случаи один должен бьть display none, но с display плавности не будет
т.к если будет просто opacity или visibility, то второй логотип не встанет на его место
что то вообще не соображаю
как правильно плавно заменить ?

Answer 1

[Сергей delphinpro]

.logo {
  display: grid;
  grid-template-areas: "logo";
}

.logo1, .logo2 {
  grid-area: logo;
  transition: opacity 0.3s ease;
}

.logo1 { opacity: 1; }
.logo2 { opacity: 0; }

.logo_state_2 .logo1 { opacity: 0; }
.logo_state_2 .logo2 { opacity: 1; }

Comments

[Андрей]

Благодарю!