A postagem quatro novos recursos CSS para efeitos de entrada e saída compartilhou alguns recursos úteis que acabaram de ser lançados no Chrome. Agora, dois desses recursos, @starting-style e Transition-behavior: allow-discrete, se tornaram o valor de referência recentemente disponível com o lançamento do Firefox 129. Agora você pode criar efeitos de animação de entrada para elementos, incluindo animações de display: none
e animações na camada superior.
Configurando efeitos de entrada com o @starting-style
A regra @starting-style
define os estilos iniciais em um elemento antes que ele seja renderizado na página. Isso é necessário para elementos animados do display: none
, porque eles precisam de um estado para a animação.
Use @starting-style
como qualquer outra em-rule no CSS, colocando os estilos do elemento dentro dele. Por exemplo, com uma <dialog>
, coloque os estilos dialog[open]
dentro de uma regra @starting-style
. Esses são os estilos usados antes da abertura da caixa de diálogo.
@starting-style {
dialog[open] {
/* Styles before the dialog opens */
}
}
Como ativar animações discretas com allow-discrete
A segunda coisa necessária para oferecer suporte a animações de entrada para elementos animados usando display: none
, como caixas de diálogo e pop-ups, é ativar um novo modo de animação para oferecer suporte à animação de propriedades distintas. Propriedades discretas são aquelas que não podem interpolar entre valores. Pense nisso como uma chave de ativação/desativação. Alguns exemplos incluem display
, visibility
, mix-blend-mode
: qualquer propriedade em que o atributo é um valor ou outro. Com esse novo modo de animação, o navegador agora oferece suporte à troca de valores no ponto 50% em vez de no ponto 0% de uma transição.
Use uma das duas maneiras a seguir para animar os efeitos de entrada para elementos display: none
e visibility: hidden
:
- A propriedade autônoma
transition-behavior
com o valorallow-discrete
. - O valor
allow-discrete
na abreviação de transição.
Recomendamos o segundo método, porque a aplicação de transition-behavior
está incluída na abreviação transition
. Se você aplicar transition-behavior: allow-discrete
antes da abreviação de transição em que está aplicando as funções de transição, tempo e easing, o navegador ignorará a transition-behavior
.
Se estiver usando isso na abreviação, você só precisará aplicar a palavra-chave allow-discrete
às propriedades específicas que exigem animações discretas. Isso é demonstrado no CSS a seguir, que faz a transição das propriedades translate
e display
, mas aplica apenas a palavra-chave allow-discrete
à propriedade display
.
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
Demonstração: como reunir tudo
O uso desses recursos é particularmente útil para elementos de camada superior, como o elemento <dialog>
ou componentes que usam o atributo popover
. No exemplo a seguir, um elemento <dialog>
é animado da parte de baixo da janela de visualização (inicialmente começando com uma translação vertical de 100 vh fora da tela) até o centro da janela, removendo a translação quando a <dialog>
estiver aberta.
/* Before the dialog opens */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* Dialog is-open state */
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}
É possível escrever isso de forma mais concisa com o aninhamento de CSS, que também é um recurso de referência recém-disponibilizado.
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
@starting-style {
translate: 0 100vh;
}
}
Conclusão
É empolgante ver um progresso como esse na linha de base e, pelo menos, é um aprimoramento progressivo para esses elementos. Sem esses recursos de efeito de entrada, os elementos animados na camada superior ou em um estilo display: none
simplesmente aparecerão na página sem a transição, como já acontece atualmente.
Para aprender a adicionar efeitos de saída de forma progressiva, confira o artigo "Quatro novos recursos CSS para animações de entrada e saída suaves" e, para saber mais sobre esses recursos, confira os seguintes recursos de documentação: