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