在 CSS 和 JS 中切换类时进行转换

Question

我想用上面有文字的图像制作幻灯片，我想用下一个和上一个按钮更改显示的图像。 我希望图像在它们之间切换时具有不透明度过渡，这是通过切换类完成的，但我没有让过渡工作。 幻灯片中的其他所有内容均已正常运行。 我感谢每一个答案^^

这是我的代码：

    <section class="featured container section">
        <div class="featured__slides">
          <div class="featured__active featured__item">
            <img class="featured__img" src="/featured/f1.jpg">
          </div>
          <div class="featured__unactive featured__item">
            <img class="featured__img" src="/featured/f2.jpg">
          </div>
        </div>
        
        <div class="featured__arrows">
          <button class="featured__arrow featured__prev">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path fill-rule="evenodd" d="M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z" clip-rule="evenodd" />
            </svg>          
          </button>

          <button class="featured__arrow featured__next">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path fill-rule="evenodd" d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z" clip-rule="evenodd" />
            </svg>                    
          </button>
        </div>
    </section>

    <style>
    .featured {
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    
        position: relative;
    }
    
    .featured__item {
        -webkit-transition: all .3s linear 0s;
        transition: all .3s linear 0s;
    }
    
    .featured__img {
        -webkit-transition: all .3s linear 0s;
        transition: all .3s linear 0s;
    }
    
    .featured__unactive {
        display: none;
    }
    
    .featured__arrows {
        display: flex;
        justify-content: space-between;
        position: absolute;
        left: 0;
        right: 0;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    
    .featured__arrow {
        height: var(--size-lg);
        width: var(--size-lg);
        color: var(--clr-cyan400);
    }
    </style>

    <script>
    const nextArrow = document.getElementsByClassName("featured__next");
    const prevArrow = document.getElementsByClassName("featured__prev");
    
    var idx = 0;
    var slides = document.getElementsByClassName("featured__slides");
    var slideshowElements = $(slides).children();
    
    $(nextArrow).click(function () { 
        slideshowElements[idx].classList.toggle("featured__active");
        slideshowElements[idx].classList.toggle("featured__unactive");
        if (slideshowElements.length - 1 == idx)
        {
            idx = 0;
        } 
        else
        {
            idx++;
        }
        slideshowElements[idx].classList.toggle("featured__active");
        slideshowElements[idx].classList.toggle("featured__unactive");
    });
    
    $(prevArrow).click(function () { 
        slideshowElements[idx].classList.toggle("featured__active");
        slideshowElements[idx].classList.toggle("featured__unactive");
        if (idx == 0)
        {
            idx = slideshowElements.length - 1;
        } 
        else
        {
            idx--;
        }
        slideshowElements[idx].classList.toggle("featured__active");
        slideshowElements[idx].classList.toggle("featured__unactive");
    });
    </script>

我也已经在“featured__img”类上尝试过过渡，但也没有用。

Answer 1

您似乎缺少 CSS 中的一个关键部分，以便在切换类时使不透明度过渡起作用。让我们更新您的 CSS 和 JavaScript 代码以达到预期的效果。

首先，更新您的 CSS 类以包含不透明度属性：

.featured__item {
  -webkit-transition: all .3s linear 0s;
  transition: all .3s linear 0s;
  opacity: 0; /* Add this line */
}

.featured__item.active {
  opacity: 1; /* Add this line */
}

现在，您的 JavaScript 代码似乎没有问题，但您可以通过创建一个函数来处理更新幻灯片的逻辑来稍微简化它。这是您的 JavaScript 代码的更新版本：

const nextArrow = $(".featured__next");
const prevArrow = $(".featured__prev");

let idx = 0;
const slides = $(".featured__slides");
const slideshowElements = slides.children();

function updateSlideshow(newIndex) {
  slideshowElements.eq(idx).toggleClass("featured__active");
  slideshowElements.eq(newIndex).toggleClass("featured__active");
  idx = newIndex;
}

nextArrow.click(function () {
  const newIndex = (idx + 1) % slideshowElements.length;
  updateSlideshow(newIndex);
});

prevArrow.click(function () {
  const newIndex = (idx - 1 + slideshowElements.length) % slideshowElements.length;
  updateSlideshow(newIndex);
});

// Initialize the first item as active
slideshowElements.eq(idx).toggleClass("featured__active");