Is there a way to remove a class from a div after the action has happened?

Issue

So I'm making an image changer (you could call it like that), the point is that an image changes after a certain time. I have coded the system already, my problem is that I'm adding a fade-in animation through a class, so what I want is for the image to fade in when it appears. Just look at my code:

The HTML:

    <figure id="changing-image"></figure>

The CSS:

.fade-in{
    animation: fadeIn 1.5s;
}

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


#changing-image{
      background-image: url(../images/asides/Interior.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      width:  60rem;
      height: 50rem;
      overflow: hidden;
      border-radius: 2px;
  }

The JavaScript:

 const imagesArray = ["url(img1)", "url(img2)", "url(img3)", "url(img4)"];
const changeImage = i => {
    if (i < imagesArray.length) {
        setTimeout(function() {
            document.getElementById('changing-image').style.backgroundImage = imagesArray[i];
            document.getElementById('changing-image').classList.add("fade-in")
            changeImage(++i);
        }, 2600);
    } else if (i === imagesArray.length) {
        changeImage(0);
    }
    document.getElementById('changing-image').classList.remove("fade-in")
}

Solution

You are lookimg for the animationend event
but you missed the issue of initial load time of each new image which may exceed your setInterval() timeout

I've chosen here to just use a promise.all to take care of this

const
  imageArray = 
    [ { path:'https://picsum.photos/id/237/200/300', status:'none', img:null }
    , { path:'https://picsum.photos/id/238/200/300', status:'none', img:null }
    , { path:'https://picsum.photos/id/239/200/300', status:'none', img:null }
    , { path:'https://picsum.photos/id/240/200/300', status:'none', img:null }
    ]
, loadImage = ref => new Promise( resolve =>
    {
    ref.img = new Image();
    ref.img.onload  =_=>{ ref.status='OK';  resolve() };
    ref.img.onerror =_=>{ ref.status='bad'; resolve() };
    ref.img.src = ref.path;
    })
, changingImage = document.querySelector('#changing-image')
  ;
// *******************************************************
// animationend event 
changingImage.onanimationend =_=>
  {
  changingImage.classList.replace('fade-in','opa1')
  }
// *******************************************************


// main code...
Promise
.all(imageArray.map(el=>loadImage(el) )) // load all imgs
.then(()=>
  {
  for(let i=imageArray.length;i--;)    // remove 
    {                                  // unloaded images
    if (imageArray[i].status==='bad') 
      imageArray.splice(i, 1)
    }
  if (imageArray.length===0)
    {
    console.log('problemo! no image are loaded!')
    return
    }

  let currentImg = 0
  setImage(currentImg)

  setInterval(()=>
    {
    currentImg = ++currentImg % imageArray.length
    setImage(currentImg)
    }
    , 5000)
  })

function setImage(indx)
  {
  changingImage.className = 'opa0' 
  changingImage.src = imageArray[indx].path 
  changingImage.classList.replace('opa0','fade-in')
  }

.opa0 { opacity: 0; }
.opa1 { opacity: 1; }

.fade-in {
  animation: fadeIn 3s;
  }
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
  }

#changing-image {
  display : block;
  width   : 200px;
  height  : 300px;
  padding : 5px;
  border  : 1px solid lightseagreen;
  margin  : 1em;
  }

<img src="" alt="" id="changing-image" class="opa0">

Answered By - Mister Jojo