Перехід CSS при видаленні класу

У мене є форма, яка функціонує як сторінка налаштувань. Коли елементи форми модифікуються, вони позначаються як unsavedі мають інший колір меж. Коли форму збережено, вони позначаються як збережені, маючи інший колір меж.

Я хочу, щоб при збереженні форми межа поступово зникала.

Замовлення піде:

<input type='text' class='unsaved' /> Not saved yet, border is yellow
<input type='text' class='saved' />   Saved, so the border is green
<input type='text' class='' />        Fade out if coming from class saved

Якщо я можу отримати перехід CSS3 на вогонь, коли клас savedбуде видалено, тоді він може зникнути, і все було б химерно. Наразі мені доводиться його анімувати вручну (звичайно, використовуючи плагін), але він виглядає непостійним, і я хотів би перенести код у CSS3, щоб він був більш плавним.

Мені це потрібно лише для роботи в Chrome та Firefox 4+, хоча інші були б непоганими.

CSS:

Ось пов'язаний CSS:

.unsaved {
    border: 3px solid #FFA500;
    padding: 0;
}
.saved {
    border: 3px solid #0F0;
    padding: 0;
}

Я хотів би працювати в наступному переході (або щось подібне):

border-color: rgba(0,0,0,0);
-webkit-transition: border-color .25s ease-in;  
-moz-transition: border-color .25s ease-in;  
-o-transition: border-color .25s ease-in;  
transition: border-color .25s ease-in;

Примітка:

Особисто я не згоден з такою схемою взаємодії з користувачем, але саме так хоче наш керівник програмного забезпечення. Будь ласка, не пропонуйте мені змінювати спосіб функціонування в даний час. Дякую!

Переходи 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;
}

Введення миші

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

Залиште мишу

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