При добавлении класса не работает transition?

Question

[Egorian]

Хочу сделать слайдер, но не работает transition.

<ul id="slider">
        <li class="slide show" > Undefined<img src="..." alt=""></li>
        <li class="slide">Undefined<img src="..." alt="" ></li>
        <li class="slide">Undefined<img src="..." alt=""></li>
        <li class="slide">Undefined<img src="..." alt="" ></li>
        <li class="slide">Undefined<img src="..." alt=""></li>
        <li class="slide">Undefined<img src="...

" alt=""></li>
    </ul>

.slide{
    text-align: center;
position: absolute;
font-size: 5vw;
    margin-left:  35%;
    width: 30%;
    height: auto;
   display: none;

 
    opacity: 0;
    transition: all 1s opacity ;
 
}
.show{
position: relative;
    display: block;
    opacity: 1;
          transition: all 1s opacity ;

var slideInterval=setInterval(nextSlide,2000);
function nextSlide(){
   
        slides[currentslide].className='slide';
    currentslide=(currentslide+1)%slides.length;
            slides[currentslide].className='slide show';
}

Answer 1

[Данил Тивиков]

transition надо добавлять не к show, а к slide. + Свойство display не "поддается" transition