<div class="box">
  <h1>Click to me</h1>
</div>

.box {
  text-align: center;
  background: #f4f4f4;
  transition: background-color 1.5s
}
h1 {
  transition: opacity 3s;
}

const box = document.querySelector('.box')
const title = document.querySelector('h1')

title.addEventListener('click', function() {
  this.style.opacity = 0
  this.addEventListener('transitionend', function() {
    box.style.backgroundColor = 'red'
  })
})