Desativar / desativar transições CSS3 herdadas

117

Portanto, tenho as seguintes transições css anexadas ao elemento 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; 
}

Existe uma maneira de desativar essas transições herdadas em elementos específicos?

a.tags { transition: none; }

Não parece estar fazendo o trabalho.

css transitions css-transitions Scotty
fonte

Respostas:

166

O uso de transition: noneparece ser suportado (com um ajuste específico para Opera) dado o seguinte 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>

... e 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;
}

Demonstração JS Fiddle .

Testado com Chromium 12, Opera 11.xe Firefox 5 no Ubuntu 11.04.

A adaptação específica ao Opera é o uso de -o-transition: color 0 ease-in;que visa a mesma propriedade conforme especificado nas outras transitionregras, mas define o tempo de transição para 0, o que efetivamente impede que a transição seja perceptível. O uso do a.noTransitionseletor é simplesmente fornecer um seletor específico para os elementos sem transições.

Editado para observar que a resposta de @Frédéric Hamidi , usando all(para Opera, pelo menos) é muito mais conciso do que listar cada nome de propriedade individual que você não deseja que tenha transição.

Demo JS Fiddle atualizado, mostrando o uso de allno Opera:,-o-transition: all 0 none após a auto-exclusão da resposta de @Frédéric .

David diz reintegrar Monica
fonte
Ahh, eu precisava adicionar as tags específicas do navegador antes da transição. Malvado, saúde!
Scotty
Obrigado por opera sem informações de transição.
pedro_sland
5
Opera é realmente chato com essa diferença
Junior Mayhé
1
por que você não pode fazer algo como: transição: cor nenhuma, cor de fundo 0,1s atenuação;
26

Se quiser desativar uma única propriedade de transição, você pode fazer:

transition: color 0s;

(já que uma transição de zero segundo é o mesmo que nenhuma transição.)

Will Madden
fonte
Um defensor do desempenho pode se ofender, mas isso parece legítimo por desabilitar uma única propriedade.
doublejosh
Não funciona para mim no Chrome agora. Isso apenas desativa todas as transições herdadas.
Inversão de
Você pode dar um exemplo @Inversion
Will Madden
@WillMadden, aqui jsfiddle.net/312bu8po tenta o estado inicial e, em seguida, descomente a linha preparada em css - a transição para leftserá removida.
Inversão
2

Outra maneira de remover todas as transições é com a unsetpalavra-chave:

a.tags {
    transition: unset;
}

No caso de transition, unseté equivalente a initial, visto que transitionnão é uma propriedade herdada:

a.tags {
    transition: initial;
}

Um leitor que conhece unsete initialpode dizer que essas soluções estão corretas imediatamente, sem ter que pensar sobre a sintaxe específica de transition.

Rory O'Kane
fonte
não definido e inicial não são bem suportados pelo IE
allenski
caniuse.com/#feat=css-unset-value - Eu provavelmente escolheria inicial se você precisar de suporte para o IE11.
Nick Middleweek
0

Você também pode deserdar todas as transições dentro de um elemento contido:

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
fonte
2
Hmm, provavelmente eu não aconselharia fazer dessa forma. A regra não se aplica ao elemento ao qual você aplica a classe, apenas aos filhos, e se aplica a todos os filhos, mesmo aqueles que não precisam da aplicação da regra, o que pode levar a problemas de especificidade e escalabilidade mais adiante.
Scotty
Esta foi uma solução muito útil para mim recentemente remover as transições globalmente de um elemento de mapa do Google, que estavam adicionando estranheza ao comportamento do mapa.
freeworlder