CODEWITHSUNDEEP
javascriptcssclass
Liana Pavlicheva
Liana Pavlicheva

Reputation: 127

Transition doesn’t work when switching between classes

When I switch between classes at first time, opacity transition doesn’t work. When I switch back, it does work. I tried removing visibility property and leaving just opacity, did not work.

const navList = document.querySelector('.nav-list')
if (navList.classList.contains('invisible')) {
  setTimeout(function() {
    navList.classList.add('visible'), navList.classList.remove('invisible');
  }, 1000);
} else {
  setTimeout(function() {
    navList.classList.add('invisible');
  });
  navList.classList.remove('visible');
}
.visibile {
  opacity: 1;
  visibility: visible;
  transition: all ease-in 1s;
}

.invisible {
  opacity: 0;
  visibility: hidden;
  transition: all ease-in 1s;
}
<ul class="nav-list invisible text-center mt-5">
  <div class="">
    <div class="">
      <div>
        <li class="p-3 underline">Home</li>
        <li class="p-3 underline">About</li>
        <li class="p-3 underline">Contact</li>
      </div>
    </div>
  </div>
</ul>

Upvotes: 1

Views: 47

Answers (1)

Phil
Phil

Reputation: 164731

As mentioned in the comments, put the transition on a class that's always present, eg nav-list. I would also recommend putting some state on that class so then you only need to toggle one other class (instead of two).

const navList = document.querySelector('.nav-list')
setInterval(() => {
  navList.classList.toggle('invisible')
}, 2000)
.nav-list {
  transition: all ease-in 1s;
  opacity: 1;
  visibility: visible;
}

.nav-list.invisible {
  opacity: 0;
  visibility: hidden;
}
<ul class="nav-list invisible text-center mt-5">
  <div class="">
    <div class="">
      <div>
        <li class="p-3 underline">Home</li>
        <li class="p-3 underline">About</li>
        <li class="p-3 underline">Contact</li>
      </div>
    </div>
  </div>
</ul>

Upvotes: 3

Related Questions