Как плавно убирать класс у блока?

Question

[ssawyer]

Есть код, который убирает и добавляет класс по наведению:

$(document).ready(function(){
    $('.products__item').hover(
      function() {
        $( this ).removeClass('inactive');
      }, function() {
        $( this ).addClass('inactive');
      }
    );
  });

Как реализовать чтобы класс убирался плавно? Т.е например прозрачность класса inactive плавно затухала

Comments

[Сергей delphinpro]

плавно убирать класс

Это как? По одной букве?
Класс или есть, или его нет.

[ssawyer]

Сергей delphinpro, Как то анимировать событие, а то сейчас при наведении курсора все происходит резко.

[Сергей delphinpro]

ssawyer, да я то понял. Это был намёк на то, что вопросы нужно формулировать правильно.
Или хотя бы логически. Классы не анимируются. Анимируются css-свойства.
Ну хотя бы так:

Как плавно анимировать прозрачность при добавлении или удалении класса

Answer 1

[Сергей delphinpro]

.products__item {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.products__item.inactive {
  opacity: 0.5;
}

Comments

[ssawyer]

А если изначально присвоен класс inactive и в блоке есть текст, на который тоже действует opacity, а нужно только на фон?

[Сергей delphinpro]

ssawyer,

А если изначально присвоен класс

переход (transition) работает в обе стороны.

а нужно только на фон?

меняйте фон, он тоже анимируется.

Answer 2

[Павел Загайнов]

Скорее всего вам нужно свойство css - transition

Answer 3

[sharpsss]

изначально дай блоку display:none; потом "по наведению" делай его display:flex , ну и да в css добавь вот это

.inactive{
animation: ani 3s forwards;
}
@keyframes ani {
  0% {opacity: 0;}
  100% {opacity: 1;}
}