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

Примечание:

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

60
css css-transitions css3

4 ответов

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

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

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

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

51

ответ @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 класс будет анимирован.

13

в основном настроить css, как:

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

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

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

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