Javascript轮播css转换不起作用

Question

我想知道为什么我的css过渡不起作用。 旋转木马完成循环和所有，但我的过渡仅在我打开开发工具并用鼠标指向元素时才有效。 下面是代码： https ： //codepen.io/anon/pen/zXQpNo

谢谢你的帮助

var slides = Array.from(document.querySelectorAll(".slide_element"));
    var i = 0;
    function test(){
        if(i === slides.length - 1){
        slides[slides.length - 1].classList.remove("displaying");
        i = 0;
        slides[i].classList.add("displaying");
         }
        else{
            slides[i].classList.remove("displaying");
            slides[i+1].classList.add("displaying");
            i++;
        }
    }
    setInterval(() => {
        test();
    }, 3000);

Answer 1

在“slide_element”中删除display: none; 并且过渡增加了它（全部）所以它将变成这样的transition: all .3s; 并将其设置为绝对定位，因此您的CSS将如下所示：

.slide_element{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s;
    transform: translateX(1000px);
}