如何避免Angular中CSS动画实现的轮播图出现闪烁问题？

你遇到的白色闪烁确实是图片延迟加载导致的——CSS动画执行到对应关键帧时才会发起图片请求，此时图片未加载完成，就会显示元素默认的白色背景，从而出现闪烁。以下是两种可行的解决方案：

方案一：预加载所有轮播图片 #

在组件初始化时提前加载所有轮播图片，确保动画启动前图片已存入浏览器缓存，切换时直接从缓存读取，避免加载等待。

修改组件的.ts文件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component', // 替换为你的组件选择器
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  // 列出所有轮播图片的路径
  private carouselImages = [
    '../../assets/outro/1.jpg',
    '../../assets/outro/2.png',
    '../../assets/outro/3.jpg',
    '../../assets/outro/4.png'
  ];

  ngOnInit(): void {
    // 预加载图片
    this.carouselImages.forEach(imgUrl => {
      const img = new Image();
      img.src = imgUrl;
    });
  }
}

原有的CSS和HTML代码可以保持不变，预加载完成后动画切换就不会再出现闪烁。

方案二：使用多层叠元素切换透明度（更平滑的无缝过渡） #

放弃直接切换background-image的方式，改用多个绝对定位的层叠元素，通过动画控制它们的透明度和层级，从根源避免加载导致的闪烁问题。

修改CSS文件 #

.carousel-wrapper {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0;
  animation: fadeSlide 8s forwards;
  z-index: 1;
}

/* 为每个幻灯片设置背景图和动画延迟 */
.carousel-slide:nth-child(1) {
  background-image: url(../../assets/outro/1.jpg);
  animation-delay: 0s;
}
.carousel-slide:nth-child(2) {
  background-image: url(../../assets/outro/2.png);
  animation-delay: 2.67s; /* 8s / 3 ≈ 2.67s，对应原动画的切换节点 */
}
.carousel-slide:nth-child(3) {
  background-image: url(../../assets/outro/3.jpg);
  animation-delay: 5.34s;
}
.carousel-slide:nth-child(4) {
  background-image: url(../../assets/outro/4.png);
  animation-delay: 8s;
}

@keyframes fadeSlide {
  0% { opacity: 0; z-index: 1; }
  10% { opacity: 1; z-index: 2; } /* 快速淡入 */
  90% { opacity: 1; z-index: 2; } /* 保持显示直到切换节点 */
  100% { opacity: 0; z-index: 1; } /* 淡出 */
}

修改HTML文件 #

<div class="carousel-wrapper">
  <div class="carousel-slide"></div>
  <div class="carousel-slide"></div>
  <div class="carousel-slide"></div>
  <div class="carousel-slide"></div>
</div>

这种方式下，所有图片在页面加载时就会被请求，切换时只是调整元素的透明度和层级，过渡完全无缝，不会有任何闪烁。如果需要循环轮播，只需将animation-iteration-count设置为infinite，并调整动画时间和延迟逻辑即可。

内容的提问来源于stack exchange，提问作者Tuffling_Tony