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

Примечание:

Лично я не согласен с этой схемой взаимодействия с пользователем, но то, как это хочет наш программный лидер. Пожалуйста, не предлагайте мне изменить способ работы. Спасибо!

Ответ 1

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

Если для объекта применяются настройки перехода CSS (без класса "saved"), они будут применяться к обоим переходам.

Мы могли бы помочь более конкретно, если бы вы включили все соответствующие CSS, с которыми вы работаете, с предоставленным вами HTML-кодом.

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

Ответ 2

Ответ @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);
}

plunker этого примера.

С помощью этого кода будет удалено только удаление класса recently-updated.

Ответ 3

В основном настройте свой CSS как:

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

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

Ответ 4

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

#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');