Отключить/отключить унаследованные переходы CSS3

Итак, у меня есть следующие css-переходы, присоединенные к элементу a:

a { 
     -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ;  
     -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
     -o-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
     transition:color 0.1s ease-in, background-color 0.1s ease-in; 
}

Есть ли способ отключить эти унаследованные переходы для определенных элементов?

a.tags { transition: none; }

Кажется, что не выполняет эту работу.

Ответы

Ответ 1

Использование transition: none, как представляется, поддерживается (с конкретной настройкой для Opera) с учетом следующего HTML:

<a href="#" class="transition">Content</a>
<a href="#" class="transition">Content</a>
<a href="#" class="noTransition">Content</a>
<a href="#" class="transition">Content</a>

... и CSS:

a {
    color: #f90;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    transition:color 0.8s ease-in, background-color 0.1s ease-in; 
}
a:hover {
    color: #f00;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    transition:color 0.8s ease-in, background-color 0.1s ease-in; 
}
a.noTransition {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

JS Fiddle demo.

Протестировано с Chromium 12, Opera 11.x и Firefox 5 на Ubuntu 11.04.

Конкретная адаптация к Opera - это использование -o-transition: color 0 ease-in;, которое нацелено на те же свойства, что и в других правилах transition, но устанавливает время перехода на 0, что эффективно предотвращает заметный переход. Использование селектора a.noTransition - это просто указать конкретный селектор для элементов без переходов.

Отредактировано, чтобы заметить, что @Frédéric Hamidi отвечает, используя all (для Opera, по крайней мере) гораздо более кратким, чем листинг из каждого отдельного имени свойства, которое вы не хотите иметь.

Обновленная демонстрация JS Fiddle, показывающая использование all в Opera: -o-transition: all 0 none, после самоустранения @Frederic ответ.

Ответ 2

Если вы хотите отключить одно свойство перехода, вы можете сделать:

transition: color 0s;

(так как нулевой второй переход такой же, как никакой переход.)

Ответ 3

Другой способ удалить все переходы с помощью ключевого слова unset:

a.tags {
    transition: unset;
}

В случае transition unset эквивалентен initial, так как transition не является унаследованным свойством:

a.tags {
    transition: initial;
}

Читатель, который знает о unset и initial может сказать, что эти решения являются правильными сразу, без необходимости думать о конкретном синтаксисе transition.

Ответ 4

Вы также можете отключить все переходы внутри содержащего элемента:

CSS

.noTrans *{
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}

HTML:

<a href="#">Content</a>
<a href="#">Content</a>
<div class="noTrans">
<a href="#">Content</a>
</div>
<a href="#">Content</a>

Ответ 5

Исходя из значения перехода по умолчанию в W3schools: all 0s ease 0s, что должно быть совместимым с кроссбраузерным способом отключения перехода.

Вот ссылка: https://www.w3schools.com/cssref/css3_pr_transition.asp