时间戳

首页 > 解决方案 > Javascript轮播css转换不起作用

javascript - Javascript轮播css转换不起作用

问题描述

嗨，我想知道为什么我的 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);

标签： javascripthtmlcssanimationtransition

解决方案

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

推荐阅读