图像在 CSS 过渡期间不会融合答案

【问题标题】：Images don't blend out during CSS transition图像在 CSS 过渡期间不会融合
【发布时间】：2018-08-30 05:20:43
【问题描述】：

我的具体问题是，在幻灯片样式图像切换期间，图像在下一个图像过渡之前突然消失。

整个幻灯片效果很好，只是在下一张图片淡入之前每张图片突然消失是相当令人不安的。

我是初学者，没有 JQuery 经验，所以想知道我是否应该使用与 webkit 动画不同的东西。

HTML：

<div class="pimgSlideshow"; style="max-width:500px">
<img class="mySlides fade" src="../images/pic1.jpg" style="width:100%">
<img class="mySlides fade" src="../images/pic2.jpg" style="width:100%">
<img class="mySlides fade" src="../images/pic3.jpg" style="width:100%">
</div>

CSS：

.mySlides {display:none;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-in-out;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .5} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .5} 
  to {opacity: 1}
}

JS：

var myIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";  
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}    
x[myIndex-1].style.display = "block";  
setTimeout(carousel, 5000);
}

【问题讨论】：

x[i].style.display = "none";使图像立即消失。您应该创建一个 fadeIn 和 fadeOut 类，并在必要时将它们应用到正确的图像上，为不透明度设置动画。

标签： html css image animation webkit

【解决方案1】：

与其使用 CSS 动画，不如使用 CSS 过渡来代替 display:none;在 opacity ="0" 和 opacity ="1" 的 javascript 中。

此外，通过绝对定位图像，它们会在淡入和淡出时看起来好像彼此重叠。

更新的 JS：

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
        x[i].style.opacity = "0";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.opacity = "1";  
    setTimeout(carousel, 5000);
}

CSS

.pimgSlideshow {
    position: relative;
}

.mySlides {
    display:block;
    transition: ease all 1s;
    position: absolute;
    left: 0;
    top: 0;
}

看这个小提琴来演示：http://jsfiddle.net/c8uaqk31/19/

【讨论】：

效果很好。看起来好多了。不那么刺耳。非常感谢。