How to add delay to Javascript transition?

Question

This is my Javascript code -

var slideshows = document.querySelectorAll('[data-component="slideshow"]');
slideshows.forEach(initSlideShow);
function initSlideShow(slideshow) {
    var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`);
    var index = 0, time = 10000;
    slides[index].classList.add('active');
    setInterval( () => {
        slides[index].classList.remove('active');
        index++;
        if (index === slides.length) index = 0;
        slides[index].classList.add('active');
    }, time);
}

This is my markup -

<?php foreach( $hero_images as $image_id ): ?>
    <div class="slide" style="background-image: linear-gradient(rgba(0,0,0, 0.5), rgba(0,0,0, 0.5)), url('<?php echo wp_get_attachment_image_url( $image_id, 'full' );  ?>')">
        <div class="text">
            <h1>Example</h1>
            </div>
        </div>
    </div>
<?php endforeach; ?>

I have an array of images from Word Press and have them in the background of the parent div.

This is the CSS -

[data-component="slideshow"] .slide {
  display: none;
}

[data-component="slideshow"] .slide.active {
  display: block;
}

It just toggles the CSS display rule

The code works and the divs transition between display none and display block, but I want the transition to be smoother. I want to add a fade in.

I thought something like this would do it -

.slide {
  opacity: 0;
  transition: 1s;
}

.active {
  opacity: 1 !important;
  transition: 1s;
}

But it does not have any affect.

Is it possible to add a delay to the transition of display:none to display:block?

Answer 1

You can use a keyframe-animation to controll the timing of your attributes more accurately.

Here is an example of a fadein-animation (onclick) using keyframes:

<div class="outerContainer">
  <div class="testcontainer">

  </div>
</div>

$(".testcontainer").addClass("anim");
$(".outerContainer").on("click",function(){
    $(this).find(".testcontainer").toggleClass("active");
});

$(".testcontainer").addClass("anim");
$(".outerContainer").on("click",function(){
    $(this).find(".testcontainer").toggleClass("active");
});

.testcontainer{
  width:100%;
  height:100%;
  background:green;
  opacity:0;
  display:none;
}
.outerContainer{
  border: 1px solid black;
  height:200px;
  width:600px;
}

.outerContainer .testcontainer.active{
  animation-duration: 2s;
  animation-name: fadeIn;
  display:blocK;
  opacity:1;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    display:block;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="outerContainer">
  <div class="testcontainer">

  </div>
</div>

I would still recommend you to use a library like jquery or pure javascript for animations like this, since its alot simpler to implement animations in this way. If you have the creative freedom to choose, of course.