Как правильно задать transition при использования hover эффекта через javascript

let avatarSimple = document.querySelector(".avatar_simple"); let avatarQuantumBreak = document.querySelector(".avatar_quantum_break"); avatarQuantumBreak.style.display = "none"; let hover = () => { avatarQuantumBreak.style.display = "block"; avatarSimple.style.display = "none"; } let normal = () => { avatarQuantumBreak.style.display = "none"; avatarSimple.style.display = "block"; } .avatar { position: relative; border-radius: 50%; display: flex; justify-content: center; } .avatar .avatar_simple img , .avatar .avatar_quantum_break img { border-radius: 50%; -webkit-transition: 5s ease-out; }

sfsf

Подскажите, как правильно задать плавный переход(transition) между картинками где используется hover эффект через js. Возможно ли такое реализовать?

Ответ

Невозможно получить плавную анимацию путем смены diplay:block/flex/inline-block(или любой другой видимый) на display: none. Исключение .fadeIn() и .fadeOut() в jQuery, но оно работает плавно лишь потому, что с помощью скрипта плавно меняется прозрачность. Применяйте transition именно к тому блоку который будет меняться, а не к его родителю. Для того, чтобы анимация была плавной используют изменение заранее определенной высоты, прозрачности или transform например.
Как вариант, в вашем примере можно плавно менять прозрачность:
let avatarSimple = document.querySelector(".avatar_simple"); let avatarQuantumBreak = document.querySelector(".avatar_quantum_break"); avatarQuantumBreak.style.opacity = "0"; let hover = () => { avatarQuantumBreak.style.opacity = "1"; } let normal = () => { avatarQuantumBreak.style.opacity = "0"; } .avatar { position: relative; border-radius: 50%; display: flex; justify-content: center; height: 195px; } .avatar_simple, .avatar_quantum_break { position: absolute; display: block; text-align:center; transition: opacity 5s ease-out; } .avatar .avatar_simple img, .avatar .avatar_quantum_break img { border-radius: 50%; display: inline-block; }

sfsf