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

Question

У меня есть форма, которая функционирует как страница настроек.Когда элементы формы модифицируются, они помечаются как unsaved и имеют другой цвет границы.Когда форма сохранена, они помечаются как сохраненные другим цветом рамки.

Я хочу, чтобы при сохранении формы граница постепенно исчезала.

Порядок будетgo:

<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;
}

Iхотел бы работать в следующем переходе (или что-то вроде этого):

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;

Примечание:

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

Answer 1

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

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

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

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

Answer 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.

Answer 3

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

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

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

Answer 4

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

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