Переход CSS3 только при добавлении класса, а не при удалении

У меня есть следующий пример CSS:

.message{
    background-color: red;
    transition: background-color 5s;
    -webkit-transition: background-color 5s; /* Safari */
    transition-delay: 2s;
    -webkit-transition-delay: 2s; /* Safari */
}

.unreadMessage{
    background-color: blue;
}

Затем у меня есть класс DIV с классом .message, и, нажав кнопку, я добавлю класс .unreadMessage и нажав другую кнопку, я удалю его.

В этом примере каждый раз, когда я изменяю background-color, добавляя или удаляя .unreadMessage, он выполняет переход CSS.

Что я хочу сделать, по возможности, иметь мгновенное изменение цвета, когда я добавляю .unreadMessage, и имеет переход только при его удалении.

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

Но это можно сделать только с одним классом или с использованием обходного пути Javascript?

Ответ 1

Если вы хотите применить переход только тогда, когда элемент .message не имеет класса unreadMessage, затем поместите свойства transition в селектор .message:not(.unreadMessage):

.message{
    background-color: red;
}
.message:not(.unreadMessage) {
    -webkit-transition: background-color 5s; /* Safari */
    transition: background-color 5s;
    -webkit-transition-delay: 2s; /* Safari */
    transition-delay: 2s;
}

.unreadMessage{
    background-color: blue;
}

Демо: http://jsfiddle.net/Hs8fa/
Документация для :not()

Ответ 2

При использовании переходов CSS необходимо помнить две вещи:

Переходы происходят, когда состояние элемента изменяется " с использованием псевдоклассов, таких как: hover или: активный или динамически заданный с использованием JavaScript."
У вас должна быть начальная точка и конечная точка, или они не будут работать.

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

Самый простой пример - от .element до .element.active. Если мы поместим переход в базовый класс, .element, а затем добавим модифицирующий класс .active, переходы, применяемые к .element, перейдут от настроек .element к настройкам .element.active..

Здесь пример JSFiddle для изменения базового класса

Во-вторых, и это тот, который я все время забыл, базовый класс должен иметь стиль начала. Я не могу переходить left в измененное состояние, если у меня нет left в базовом состоянии.

Ответ 3

CSS переход только при добавлении класса

Следующий фрагмент кода имеет div с transition: none;

При щелчке переопределите свойство transition классом add-transition

При втором нажатии тот же класс будет удален & нет перехода.

var elm = document.querySelector('.no-transition'); 
		
elm.onclick = () => (
    elm.classList.toggle('add-transition') 
);

.no-transition {
    background-color: aliceblue;
    transition: none;
}

.add-transition {
    background-color: deepskyblue;
    transition: background-color 3s;
}

/* Note: As like other any other CSS property
   Specificity or CSS Order can make the diffrence.
   Styles below are for code the snippet to look better. */

.wrapper {
    padding: 20px;
    margin: 20px;
    text-align: center;
    cursor: pointer;
    border: 1px solid lightgray;
}

<div class="wrapper no-transition">
  Click here !!! <br/>
  By default, No transition. <br/>
  on click, bg color transition added. <br/>
  on second click, back to default, no transtion.
</div>