悬停时FadeIn起作用，但是fadeOut忽略不透明度过渡吗？

Question

有人可以解释为什么这行不通吗？我在HTML .content--slide中有一个主类，现在当我将鼠标悬停时将不透明度设置为0时，我将基于当前的悬停索引添加一个类，当我在每张幻灯片上方时，我将获得FadeIn不透明度，但是当移动鼠标，它不再起作用了，为什么？

我的JS：

(() => {
    const dataPictures = document.querySelectorAll('.content--wrap');
    const imgWrap = document.querySelector('.imgwrap');

    dataPictures.forEach(function (picture, index) {

        const currentIndex = index + 1;

        picture.addEventListener('mouseover', () => {
            imgWrap.classList.add(`content--${currentIndex}`);
        });

        picture.addEventListener('mouseleave', () => {
            imgWrap.classList.remove(`content--${currentIndex}`);
        });
    });



})();

我的CSS：

.content--slide {
  opacity: 0;
  transition: opacity 7s linear;
}

.content--1 {
  opacity: 1;
  transition: opacity 2s linear;
  background: url('https://images.pexels.com/photos/994523/pexels-photo-994523.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
}

.content--2 {
  opacity: 1;
  transition: opacity 2s linear;
  background: url('https://images.pexels.com/photos/87223/pexels-photo-87223.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
}

.content--3 {
  opacity: 1;
  transition: opacity 2s linear;
  background: url('https://images.pexels.com/photos/938958/pexels-photo-938958.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
}

.content--4 {
  opacity: 1;
  transition: opacity 2s linear;
  background: url('https://images.pexels.com/photos/919436/pexels-photo-919436.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
}