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

Question

У меня есть форма, которая работает как страница настроек. Когда элементы формы изменены, они помечены как 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; 

Примечание:

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

Answer 1

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

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

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

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

Answer 2

В основном настроить ваш CSS как:

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

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

Answer 3

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

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

Mouse Enter

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

Оставить мышь

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

Answer 4

Ответ @ jfriend00 помогает мне понять технику только для анимации удалить класс (не добавить). (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.