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);
}