it-swarm.com.ru

Отключить/отключить унаследованные переходы 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; } 

Кажется, не делает работу.

108
Scotty

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


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

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

155
David Thomas

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

transition: color 0s;

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

23
Will Madden

Еще один способ удалить все переходы - использовать ключевое слово unset :

a.tags {
    transition: unset;
}

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

a.tags {
    transition: initial;
}

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

2
Rory O'Kane

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

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

0
Shota

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

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>
0
freeworlder