Question

我正在开展一个项目，我需要制作一个动态加载的全屏图像背景，每隔几秒就交叉淡化新图像。该脚本现在在大多数浏览器中都可以正常工作，但在Safari上，过渡效果并不适用。不是很好地过渡到下一个图像，图像消失了1.5秒（它应该在过渡时间内完成）。有谁知道我怎么解决这个问题？我尝试使用webkits解决不透明度转换问题，但它没有成功。

这里有一些代码

的script.js

const images = {
  init(imageArray) {
    elements.image_holders.forEach(function(image, index) {
      image.src = `${config.imageUrl}${imageArray[index]}`;
      config.atImage ++;
    });
    elements.image_groups[0].style.opacity = 1;
    config.imageArray = imageArray;
    this.startInterval();
  },
  startInterval() {
    imageInterval = setInterval(images.changeImage, config.interval);
  },
}

在区间中我每次都会改变不透明度，并从图像阵列中动态加载新图片。

_image_groups.scss

.__image_wrapper {
  opacity: 0;
  transition: opacity 1.5s linear;
  -webkit-transition: opacity 1.5s linear;
  -webkit-backface-visibility: hidden;
  display: block;
  width: 100%;
  height: 100%;
  img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

这就是我用于图像的样式，以实现它的过渡效果。我的工作时间从opacity: 0到opacity: 1。

有谁知道过渡为什么不适用于Safari？我在互联网上环顾四周但却找不到答案。谢谢！

Safari中的交叉淡化图像无法正常工作

0 个答案: