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

Question

Итак, у меня есть следующие 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; } 

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

Answer 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 используется просто для предоставления специального селектора для элементов без переходов.

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

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

Answer 2

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

transition: color 0s;

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

Answer 3

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

a.tags {
    transition: unset;
}

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

a.tags {
    transition: initial;
}

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

Answer 4

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

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

Answer 5

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

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>