Как добавить сюда анимацию?

Question

[vittallyyaaa]

https://codepen.io/anon/pen/vwNLOb вот такой код, но как сделать чтобы фото менялись плавно?

Comments

[Максим Кукушкин]

как идея, добавить

img{
   transition: all 1s ease-in-out
}

потом по нажатию кнопки сделать у img display: none и далее по событию img.onload поменять display на блок.
Будет эффект затухания, не знаю точно какой вам нужен

[Вадим]

Максим Кукушкин, diplay: none не анимируется. Плавности не будет. Ну либо дополнительные методы писать через animation

[Максим Кукушкин]

Вадим, справедливо, упустил этот момент(

Answer 1

[Вадим]

Ну как-то так. Набросал на коленке.

.pic {
  display: inline-block;

}

.pic img {
  opacity: 1;
  transition: opacity 1s linear;  
}

.pic img.invisible {
  opacity: 0;
}

button {
  padding: 1em;
}

button.active {
  background: tomato;
}

document.body.addEventListener('click', e => {
  if (!e.target.matches('button')) return
  
  const img = document.querySelector('.pic img')
  
  img.classList.add('invisible')
  
  img.ontransitionend = () => {
    img.onload = () => img.classList.remove('invisible')
    img.src = e.target.dataset.src
    
    document.querySelectorAll('button').forEach(btn => btn.classList.remove('active'))
    e.target.classList.add('active')
  } 
})

P.s. недостатком данного кода является то, что загрузка следующей картинки начинается только после того, как первая исчезла. Это можно оптимизировать, но не всёж за Вас решать :-)
А ещё не обязательно каждый раз искать элементы в DOM, если они не динамически генерируются.

Comments

[vittallyyaaa]

спасибо, еще зеленый я)

[Вадим]

vittallyyaaa, если ответ подходит Вам в качестве решения, то стоит его таковым отметить для других пользователей сервиса. Одни не будут тратить время на ознакомление с вопросом чтобы помочь, другие - когда столкнуться с похожим вопросом более легко найдут решение.

[vittallyyaaa]

Вадим, еще вопрос, можно как-то это реализовать с видео? Вместо фото загрузил туда анимации через , изменил скрипт под аидео, но плавно они не меняются

[Вадим]

vittallyyaaa, всё возможно. Но я даже проверять и исправлять не буду, потому что загружать принудительно видео для пользователя это плохая практика. Лучше - загружать постер от видео и кнопку play, по нажатию на которую уже подменять постер на видео.