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