CSS：两个转换可以同时运行吗？答案

【问题标题】：CSS: can two transitions run simultaneously?CSS：两个转换可以同时运行吗？
【发布时间】：2021-07-16 23:21:06
【问题描述】：

我有一堆按顺序显示的十几张图片。该幻灯片由 javascript（下）和 css（进一步下）驱动。我想实现显示图像淡出，同时新图像从右侧滑入。我也可以，但是当我尝试将两者结合起来时，新图像不会在旧图像完全消失之前出现。在下面的代码中，淡出时间为 1 秒，而滑入过渡持续 1.8 秒。所以我只看到滑入过渡的最后 0.8 秒。

是否可以同时运行两个转换，如果可以，应该改变什么来实现这一点？

javascript:

var index  = 0;
var pauze  = 0;
var slides = document.getElementsByClassName("slides");
var SPEED  = 4*1000; // Change image every n seconds


// showDivs(index);
show(slides[0]);
carousel();


function step(stepSize)
    {
    next = (index + slides.length + stepSize) % slides.length;
    hide(slides[index]);
    show(slides[next]);
    index = next;
    }


function show(slide)
    {
    slide.classList.add('w3-animate-right');
    slide.style.display = "block";
    }

    
function hide(slide)
    {
    slide.classList.remove('w3-animate-right');
    slide.classList.add('fadeOut');
    setTimeout(function() 
        {
        slide.classList.remove('fadeOut');
        slide.style.display = "none";
        } 
        ,1000);
    }

    
function carousel() 
    {
    if (pauze == 0)
        {
        step(1);
        setTimeout(carousel, SPEED); 
        }
    }

CSS：

.slides 
    {
    position:relative;
    display:none;
    height: 100%;
    width: auto;
    margin: auto;
    border: 2px solid #BBBBBB;
    opacity:1;
    transition: opacity 1s; 
    }

.slides.fadeOut 
    {
    opacity:0;
    }

.w3-animate-right
    {
    position: relative;
    animation: animateright 1.8s
    }

@keyframes animateright
    {
    from
        {
        right: -300px;
        opacity: 0
        }

     to
        {
        right: 0;
        opacity: 1
        }
    }

致电：

<img class="slides"> 
    <xsl:attribute name="src"   >images/<xsl:value-of select="filename" /></xsl:attribute>
</img>

---------- 编辑：-------------------------------- ------------------------

当我不小心更改了 javascript 代码以使显示不再设置为无时，我注意到并排显示褪色和出现的图像。因此，问题可能不在于这两个转换不是同时运行，而是新的转换正在滑入、消失，直到旧的转换消失并就位。

【问题讨论】：

请也添加您的相关 HTML，以便此问题具有 minimal, reproducible example。
是什么让你认为我在使用 html？
var slides = document.getElementsByClassName("slides"); 您正在访问 DOM 并向元素添加/删除类，并通过 CSS 设置它们的样式。如果您没有任何 HTML，那么您究竟想将样式/类应用于什么？ “我有一堆大约十几张图片” - 你在哪里有这堆图片？大概在 HTML 中？
您将类 fadeOut 应用于幻灯片，但没有显示相关的 CSS。最接近的是 .slides.fadeOut 我认为您在 .fadeOut 之前缺少一个空格，但是如果没有看到您的实际 HTML 结构，则无法确定。
@A Haworth：增加了空间，就不会再淡出。此外，将 fado 分数从 0 更改为 0.5 表明按原样执行。我会添加调用以供您参考，但如果没有修改，它就无法执行。

标签： javascript css transition slideshow

【解决方案1】：

将.slides 的位置更改为绝对位置。这确实起到了作用，因为两个转换毕竟是同时运行的，但图像并没有相互重叠。按照其他地方的建议设置 z-index 不会改变任何内容。但是，将关键帧设置在左侧可以防止在 javascript 移除过渡类时发生位置跳转。

更改的 CSS：

.slides 
    {
    position:absolute;
    top: 0;
    display:none;
    height: 100%;
    width: auto;
    margin: auto;
    opacity:1;
    border: 2px solid #BBBBBB;
    transition: opacity 1.5s; 
    z-index: 0;
    }

.slides.fadeOut 
    {
    opacity:0.0;
    }


.w3-animate-right
    {
    position: absolute;
    animation: animateright 2s;
    }

@keyframes animateright
    {
    from
        {
        left: 480px;
        opacity: 0
        }

     to
        {
        left: 0;
        opacity: 1
        }
    }

【讨论】：