Переход 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;
Примечание:
лично я не согласен с этой схемой взаимодействия с пользователем, но именно так хочет наше программное обеспечение. Пожалуйста, не предлагайте мне изменить способ его работы в настоящее время. Спасибо!
4 ответов
CSS-переходы работают, определяя два состояния для объекта с помощью CSS. В вашем случае вы определяете, как выглядит объект, когда он имеет класс "saved"
и вы определяете, как это выглядит, когда у него нет класса "saved"
(Это нормальный вид). При удалении класса "saved"
, Он будет переходить в другое состояние в соответствии с настройками перехода для объекта без "saved"
класса.
если настройки перехода CSS применяются к объекту (без "saved"
class), то они будут применяться к обоим переходам.
мы могли бы помочь более конкретно, если вы включили все соответствующие CSS вы используете с HTML вы предоставили.
Я предполагаю, глядя на ваш HTML, что ваши настройки CSS перехода применяются только к .saved
и, таким образом, когда вы удаляете его, нет никаких элементов управления, чтобы указать параметр CSS. Вы можете добавить другой класс ".fade"
что вы оставляете на объекте все время, и вы можете указать свой CSS параметры перехода в этом классе, поэтому они всегда действуют.
ответ @jfriend00 помогает мне понять технику анимации только удалить класс (не добавить).
"базовый" класс должен иметь transition
свойство (например,transition: 2s linear all;
). Это позволяет анимацию, когда любой другой класс добавляется или удаляется на этом элементе. Но чтобы отключить анимацию при добавлении другого класса (и только удаление класса animate), нам нужно добавить 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
класс будет анимирован.
в основном настроить 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');