Анимировать изменение изображения src с помощью vanilla js

Я создаю простой компонент html / css / vanilla js для отображения изображений. У меня есть список изображений вверху, и когда я нажимаю на одно из них, оно должно появиться в основном контейнере. Для этого я просто меняю элемент src img следующим образом:

document.addEventListener('DOMContentLoaded', (event) => {

    var mainImg =               document.getElementById("mainImg");
    var thumbnailContainer =    document.getElementById("thumbnailContainer");

    thumbnailContainer.addEventListener("click", (event) => {

        var linkClicked =       event.target.currentSrc;
        mainImg.src =           linkClicked;

    });
});

Теперь я хотел бы добавить немного анимации, но у меня проблемы с css transition, вот мой html:

<div class = "container">
    <img id = "mainImg" src = "xxxxx" alt = "car 2"/>
   <div id = "thumbnailContainer" class = "thumbnailContainer">
      <div class = "thumbnail">
          <img src = "xxxxx" alt = "car 2"/>
      </div>
      <div class = "thumbnail">
          <img src = "xxxxxx" alt = "car 2"/>
      </div>
      <div class = "thumbnail">
          <img src = "xxxxxx" alt = "car 2"/>
      </div>
      <div class = "thumbnail">
          <img src = "xxxxxx" alt = "car 2"/>
      </div>
  </div>
</div>

Меня беспокоит то, что элемент, который я нажимаю для запуска перехода, не нужно менять, но я просто меняю свойство src в основном изображении с помощью JS.

Как я могу это решить?