Imprensa e ClippingValor Econômico · Tier 14 de ago, 11h20
Vittá Alimentos anuncia reformulação de rótulos para atender nova regra(abre na fonte original)
PositivoAutor a10001
Peso2,9
Andaime de design
Movimento
Cada transição do produto, isolada e repetível. Movimento não se julga num PNG — e é por isso que esta rota existe: é a única pergunta da camada que nenhum instrumento responde.
Movimento explica a mudança. Toda animação aqui responde a uma de três perguntas e a nenhuma outra — de onde isto veio, o que mudou de estado, o que aconteceu com o que sumiu. Cada seção declara qual delas responde. A que não responder a nenhuma é decoração, e sai.
Orçamento
Nenhuma animação individual passa de 420ms, e isso é conferido por máquina em todas as rotas — e2e/movimento.spec.ts, teste (c) —, não por revisão. Regra que só vive em documento é regra que a sessão seguinte desfaz sem perceber.
| Superfície | Token | Em uso | Curva |
|---|---|---|---|
| Micro-estadohover, foco, cor, chip, seleção | --dur-rapida | 120ms | ease-padrao |
| Sobreposição, entrandodrawer, popover, diálogo | --dur-media | 200ms | ease-entrada |
| Sobreposição, saindoo que vai embora não precisa ser acompanhado | --dur-saida | 160ms | ease-saida |
| Troca de conjuntofiltrar, ordenar, reagrupar | --dur-troca | 240ms | ease-padrao |
| Dado que se desenhaanel, contagem, barra — uma vez por tela | --dur-lenta | 320ms | ease-entrada |
| Cerimôniaaceitar recomendação, relatório pronto — uma por tela | --dur-cerimonia | 420ms | ease-entrada |
| Passo do escalonamentorevelação de cartões, teto de 6 passos | --stagger-passo | 40ms | — |
Os valores da coluna Em uso são lidos dos tokens no navegador, não copiados da documentação. Se um deles divergir do que a §7 fixa, a linha diz qual é a diferença — que é a única forma de uma tabela de referência prestar para alguma coisa depois da primeira semana.
Micro-estado
Respondeo que mudou de estado — este alvo respondeu ao cursor, ao foco, ao clique
--dur-rapida · 120ms · .transicao-cor · transição de cor
Um link que sublinha por transição
Passe o cursor. O sublinhado do link não pisca: ele existe o tempo todo, transparente, e ganha cor — text-decoration-line não é animável, e a cor é.
Dado que se desenha
Respondede onde isto veio — este número foi calculado agora, não estava aqui de ontem
--dur-lenta · 320ms · keyframe no arco + requestAnimationFrame na contagem · uma vez por tela
de 100
Revelação escalonada
Respondede onde isto veio — os blocos chegaram nesta ordem, e a ordem é a leitura
--dur-lenta + --stagger-passo · 320ms, passo de 40ms, teto de 6 · CSS puro por nth-child · nenhum estado atravessa para o cliente
Menções
51,1
Sentimento
73,0
Alcance
51,1
Autoridade
73,0
Resolução
65,7
Peso
29,2
Entrada de item em lista
Respondede onde isto veio — estes chegaram agora; os de cima já estavam
--dur-media · 200ms · @starting-style · só alcança nó recém-inserido
Menções
Reclame Aqui4 de ago, 09h47
Produto entregue fora da validade em compra pelo aplicativo(abre na fonte original)
NegativoAutor a10002
Peso1,1
Repare que as linhas de cima não reanimam. É o que `@starting-style` compra: ele descreve o primeiro estilo de um nó recém-inserido, e por definição não alcança quem já estava.
Sobreposição
Respondede onde isto veio e para onde foi — o painel entrou pela esquerda e voltou por lá
--dur-media entrando · --dur-saida saindo · 200ms / 160ms · keyframe por data-state · entrada desacelera, saída acelera
Troca de conjunto
Respondeo que mudou de estado — a ordem trocou, e dá para ver QUEM subiu
--dur-troca · 240ms · View Transition com nome por linha · zero dependência
| Vittá Alimentos | 72 | 1284 |
| NorteSul Logística | 47 | 612 |
| Clarim Educação | 81 | 340 |
| Cooperativa Bom Campo | 38 | 208 |
Cerimônia
Respondeo que aconteceu com o que sumiu — o card não desapareceu, ele foi para o histórico
--dur-cerimonia · 420ms · uma por interação, uma por tela · View Transition com o mesmo nome nos dois ramos de render
P1PP1 · Percepção do Consumidor
Responder as reclamações de entrega abertas há mais de 5 dias
O fator Resolução puxa o peso das reclamações para cima quando elas ficam sem resposta. Há 23 casos de logística sem tratativa registrada.
AçãoPriorizar a fila de logística no Reclame Aqui e responder os 23 casos ainda esta semana.
Impacto projetado
+3,2 pt
Projeção recalculada a cada ciclo — executar todas não garante o total.
Laço
Respondeo que mudou de estado — ainda está vindo, não travou
1,4s · o único movimento infinito do produto · keyframe infinite · obrigatoriamente dentro de role=status
Vai e volta sem sumir: uma barra indeterminada que desaparece entre ciclos faz a pessoa achar que travou. É o único laço do produto, vive dentro de role="status", e o teste (d) reprova qualquer outro que apareça fora dali.
Estado da demonstração
A cerimônia acima escreve no estado da sessão de verdade — é o mesmo dado que Recomendações mostra. Isto devolve tudo ao ponto de partida, aqui e lá.