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

Javascript 轮播 css 过渡无效

Javascript carousel css transition not working

html

javascript

css

animation

transition