Vue.js 图片渐隐滑出效果实现 - 使用 CSS transition 和 opacity

Vue.js 图片渐隐滑出效果实现 - 使用 CSS transition 和 opacity

本文将介绍如何使用 Vue.js 中的 mounted() 生命周期钩子函数，结合 CSS transition 和 opacity 属性，实现图片渐隐滑出效果。

实现思路

1. 首先，在 CSS 中设置 .slider-content 的子元素（即图片）的初始 opacity 为 1，表示完全不透明。
2. 在 setInterval 的回调函数中，先将 sliderContent 的 transform 属性设为 translateX(-${firstImg.offsetWidth}px)，使得图片向左滑动。
3. 等待一段时间后，再将 firstImg 的 opacity 属性从 1 逐渐减小到 0，即实现图片一点一点的消失。可以使用 CSS3 的 transition 和 opacity 属性来实现平滑过渡。
4. 等待一段时间后，将 firstImg 从 sliderContent 中移除，并将其 opacity 属性重置为 1，以备下一次循环使用。

代码示例

mounted() {
  setInterval(() => {
    const sliderContent = document.querySelector('.slider-content');
    const firstImg = sliderContent.children[0];
    sliderContent.style.transform = `translateX(-${firstImg.offsetWidth}px)`;
    setTimeout(() => {
      firstImg.style.transition = 'opacity 1s';
      firstImg.style.opacity = '0';
      setTimeout(() => {
        sliderContent.removeChild(firstImg);
        firstImg.style.transition = '';
        firstImg.style.opacity = '1';
        sliderContent.appendChild(firstImg);
        sliderContent.style.transform = 'translateX(0)';
      }, 1000);
    }, 2000);
  }, 3000);
}

代码解释

• mounted()：Vue.js 的生命周期钩子函数，在组件被挂载到 DOM 后执行。
• setInterval()：定时器，每隔 3000 毫秒执行一次回调函数。
• querySelector()：获取 .slider-content 元素。
• children[0]：获取第一个子元素，即图片。
• transform：设置图片的平移属性，实现向左滑动。
• setTimeout()：延迟执行回调函数。
• transition：设置 opacity 属性的过渡效果，实现平滑过渡。
• opacity：设置图片的透明度。
• removeChild()：从 DOM 中移除图片元素。
• appendChild()：将图片元素添加到 DOM 中。

总结

通过以上代码，我们可以实现图片渐隐滑出效果。这种效果可以用于各种场景，比如轮播图、广告图等。

希望本文对您有所帮助！如果您还有其他问题，欢迎在评论区留言。