CSS преход при премахване на клас

CSS преходите работят, като дефинират две състояния за обекта с помощта на CSS. Във вашия случай вие определяте как изглежда обектът, когато има клас "saved" и вие определяте как изглежда, когато няма клас "saved" (това е нормален вид). Когато премахнете класа "saved", той ще премине към другото състояние според настройките за преход на място за обекта без класа "saved".

Ако настройките за CSS преход се прилагат за обекта (без класа "saved"), тогава те ще се прилагат и за двата прехода.

Бихме могли да помогнем по-конкретно, ако включите всички подходящи CSS, които използвате, с предоставения от вас HTML.

Моето предположение от разглеждане на вашия HTML е, че вашите настройки за CSS за преход се прилагат само към .saved и следователно, когато го премахнете, няма контроли за указване на CSS настройка. Може да искате да добавите друг клас ".fade", който оставяте на обекта през цялото време и можете да посочите вашите настройки за CSS преход в този клас, така че те винаги да са в сила.

Отговорът на @jfriend00 ми помага да разбера техниката за анимиране само на клас премахване (не добавяне).

Един "базов" клас трябва да има свойството transition (като transition: 2s linear all;). Това позволява анимации, когато всеки друг клас се добавя или премахва към този елемент. Но за да деактивираме анимацията, когато се добави друг клас (и само премахване на анимиран клас), трябва да добавим transition: none; към втория клас.

Пример

CSS:

.issue {
  background-color: lightblue;
  transition: 2s linear all;
}

.recently-updated {
  background-color: yellow;
  transition: none;
}

HTML:

<div class="issue" onclick="addClass()">click me</div>

JS (необходим само за добавяне на клас):

var timeout = null;

function addClass() {
  $('.issue').addClass('recently-updated');
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
  timeout = setTimeout(function () {
    $('.issue').removeClass('recently-updated');
  }, 1000);
}

плънкер на този пример.

С този код само премахването на recently-updated клас ще бъде анимирано.

Основно настройте вашия css като:

element {
  border: 1px solid #fff;      
  transition: border .5s linear;
}

element.saved {
  border: 1px solid transparent;
}

В моя случай имах някакъв проблем с прехода на непрозрачност, така че този го поправи:

#dropdown {
    transition:.6s opacity;
}
#dropdown.ns {
    opacity:0;
    transition:.6s all;
}
#dropdown.fade {
    opacity:1;
}

Мишка Enter

$('#dropdown').removeClass('ns').addClass('fade');

Мишка напуска

$('#dropdown').addClass('ns').removeClass('fade');