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

Примечание.

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


css css-transitions
person beatgammit    schedule 01.03.2012    source источник
comment
любые переходы с дисплея: ни один не будет мгновенным   -  person Peter Ehrlich    schedule 27.07.2012
comment
измените unsaved на .unsaved. Это класс, а не элемент.   -  person hofnarwillie    schedule 01.10.2013
comment
@hofnarwillie - исправлено; это была просто опечатка   -  person beatgammit    schedule 02.10.2013

Ответы (4)


arrow_upward
73
arrow_downward

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

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

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

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

person jfriend00    schedule 01.03.2012
comment
Я добавил свой CSS в его нынешнем виде и добавил желаемый переход. Я не уверен, сработает ли добавление класса .fade, потому что у него уже были бы другие настройки из «сохраненного». Я попробую это сделать и посмотрю, смогу ли я заставить его работать. Спасибо! - person beatgammit; 01.03.2012
comment
@tjameson - вам нужен класс объекта, который идентифицирует его в состоянии после удаления .saved. Как бы то ни было, у вас нет определенных переходов для этого состояния (вот почему вы их не получаете). Кроме того, вы не включили какой-либо CSS, который фактически определяет значимый переход. Вы перечислили некоторые переходы, но не показали, к каким классам они прикреплены, и это ключевой момент. Лучше всего это сработает, если вы поместите его в jsFiddle, чтобы нам было легче играть с ним там, и мы могли видеть, что работает, а что нет. - person jfriend00; 01.03.2012
comment
Обратите внимание, что отсутствие перехода в базовый класс может привести к тому, что IE не вернется к исходным свойствам должным образом. (например, если вы анимируете непрозрачность, а класс, выполняющий анимацию непрозрачности, зависнет, а не вернет [jsfiddle. net / z3txjbaj / 6], добавление перехода к базовому классу исправляет это jsfiddle.net/z3txjbaj / 9). Обратите внимание, что обе эти демонстрации работают только в Chrome и FF, это просто IE, похоже, имеет эту проблему. - person Hanna; 26.07.2016

arrow_upward
27
arrow_downward

Ответ @ jfriend00 помогает мне понять технику анимации только класса remove (не add).

«Базовый» класс должен иметь свойство 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);
}

плункер этого примера.

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

person Ruslan Stelmachenko    schedule 15.02.2016
comment
Кратко и хорошо объяснено. Спасибо - person oodavid; 01.03.2016
comment
Вот на что я могу отличный ответ! Краткое, но точное объяснение с простым, но подробным примером кода, ссылка на работающий плункер. Не могу и желать большего! - person FireAphis; 10.07.2016

arrow_upward
15
arrow_downward

В основном настройте свой css, например:

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

element.saved {
  border: 1px solid transparent;
}
person Ken Wheeler    schedule 01.03.2012

arrow_upward
4
arrow_downward

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

#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');
person user956584    schedule 08.08.2014