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

117

Итак, у меня есть следующие переходы 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?

a.tags { transition: none; } 

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

Скотти
источник

Ответы:

166

Использование, 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 .

Протестировано с 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 после самоудаления ответа @Frédéric .

Дэвид просит восстановить Монику
источник
Ах, мне нужно было добавить теги для браузера перед переходом. Злые, ура!
Скотти,
Спасибо за оперу без информации о переходе.
pedro_sland
5
Опера действительно утомительна с этой разницей
Джуниор Мэйхе
1
почему вы не можете сделать что-то вроде: transition: color none, background-color 0.1s easy-in;
26

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

transition: color 0s;

(поскольку переход через ноль секунды означает отсутствие перехода.)

Уилл Мэдден
источник
Сторонник производительности может обидеться, но это кажется законным для отключения одного свойства.
doublejosh 08
У меня сейчас это не работает в Chrome. Это просто отключает все унаследованные переходы.
Inversion
Можете привести пример @Inversion
Уилл Мэдден
@WillMadden, здесь jsfiddle.net/312bu8po попробуйте исходное состояние, а затем раскомментируйте подготовленную строку в css - переход для leftбудет удален.
Инверсия
2

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

a.tags {
    transition: unset;
}

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

a.tags {
    transition: initial;
}

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

Рори О'Кейн
источник
unset и initial плохо поддерживаются в IE
allenski
caniuse.com/#feat=css-unset-value - я бы, вероятно, выбрал начальную версию, если вам нужна поддержка IE11.
Ник Мидлвик,
0

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

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>
freeworlder
источник
2
Хм, наверное, я бы не советовал так делать. Правило не применяется к элементу, к которому вы применяете класс, только к дочерним элементам, и оно применяется к каждому дочернему элементу , даже к тем, которые не нуждаются в применении правила, что может привести к проблемам со специфичностью и масштабируемостью в дальнейшем.
Скотти
Недавно для меня это было очень полезным решением для глобального удаления переходов из элемента карты Google, которые добавляли странностей в поведение карты.
freeworlder