CSS-перехода, когда класс удаляется

Question

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;

Примечание:

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

548 4

css css3 css-transitions

4 ответов:

Comments

Ничего не найдено.

jfriend00 · Accepted Answer · 2012-03-01 02:44:14

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

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

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

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

djxak · Accepted Answer · 2016-02-15 20:51:57

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

Ken Wheeler · Accepted Answer · 2018-07-26 11:39:40

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

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

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

user956584 · Accepted Answer · 2014-08-08 12:40:34

В моем случае у меня были некоторые проблемы с прозрачностью переход это исправить:
#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');