Atraso de transição de vento de cauda

Neste artigo, aprenderemos o atraso de transição do Tailwind , um recurso poderoso para controlar o tempo de suas transições.

O Tailwind tem muitos recursos úteis, incluindo transições, que permitem animar elementos conforme eles mudam de estado.

Um atraso de transição pode ser adicionado a um elemento no Tailwind usando as classes de atraso de transição .

Esta propriedade permite atrasar o início de uma transição. Isso significa que um elemento permanecerá em seu estado inicial por um período especificado antes de fazer a transição para seu estado atualizado.

Índice-

Atraso de transição de vento de cauda:

O que é atraso de transição do Tailwind?

O atraso de transição do Tailwind é uma classe que você pode aplicar a qualquer elemento que tenha uma transição.

A classe permite que você especifique um tempo de atraso em milissegundos antes do início da transição. Isso significa que você pode criar transições mais complexas e diferenciadas que começam após um período de tempo específico.

Suponha que você tenha um botão que muda de cor quando você passa o mouse sobre ele.

Por padrão, a transição começará imediatamente quando você passar o mouse sobre o botão.

No entanto, com o atraso de transição do Tailwind, você pode adicionar um atraso para que a transição comece apenas após um período de tempo específico.

Classes de atraso de transição de vento de cauda

As classes de atraso de transição no Tailwind são explicadas abaixo:

Aulas	Visão geral
atraso-75	Esta classe é usada para aplicar um atraso de transição de 75ms a um elemento.
atraso-100	Aplica um atraso de transição de 100ms a um elemento.
atraso-150	Esta classe aplica um atraso de transição de 150ms a um elemento.
atraso-200	Neste caso, um atraso de transição de 200ms é aplicado a um elemento.
atraso-300	Usando esta classe, um atraso de transição de 300ms é aplicado a um elemento.
atraso-500	Usado para aplicar um atraso de transição de 500ms a um elemento.
atraso-700	Um atraso de transição de 700ms é aplicado a um elemento.
atraso-1000	Esta classe é usada para aplicar um atraso de transição de 1000ms a um elemento.

Sintaxe

<element class="delay-100">...</element>

O exemplo abaixo mostra a implementação de algumas classes do utilitário Transition Delay no Tailwind:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html><head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
 <h1 class="text-gray-700 text-2xl font-semibold">
  MrExamples
 </h1>
 <p class="font-semibold my-2 text-slate-900">Transition Delay Class in Tailwind CSS</p>
 <p class="text-gray-500 font-semibold my-2">Hover on the buttons for demonstration</p>
 <div class="bg-gray-200 m-4 grid grid-flow-col gap-4 p-5 font-medium"> 
  <button class="transition delay-75 ease-in-out text-slate-800
        bg-amber-300 hover:bg-amber-400
        rounded-lg px-4 py-2">
      delay-75
  </button>
  <button class="transition delay-150 ease-in-out text-amber-200
        bg-slate-600
        hover:bg-slate-700
        rounded-lg px-4 py-2">
      delay-150
  </button>
  <button class="transition delay-300 ease-in-out text-slate-800
        bg-fuchsia-400
        hover:bg-fuchsia-500
        rounded-lg px-4 py-2">
      delay-300
  </button>
  <button class="transition delay-700 ease-in-out
        bg-orange-400 hover:bg-orange-500 
        rounded-lg px-4 py-2">
      delay-700
  </button>
 </div> 
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O exemplo abaixo cobre as demais classes relacionadas ao Transition Delay que não foram cobertas no exemplo anterior:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html><head>
 <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
 <h1 class="text-gray-700 text-2xl font-semibold">
  MrExamples
 </h1>
 <p class="font-semibold my-2 text-slate-900">Transition Delay Class in Tailwind CSS</p>
 <p class="text-gray-500 font-semibold my-2">Hover on the buttons for demonstration</p>
 <div class="bg-gray-200 m-4 grid grid-flow-col gap-4 p-5 font-medium"> 
  <button class="transition delay-100 ease-in-out text-slate-800
        bg-amber-300 hover:bg-amber-400
        rounded-lg px-4 py-2">
      delay-100
  </button>
  <button class="transition delay-200 ease-in-out text-amber-200
        bg-slate-600
        hover:bg-slate-700
        rounded-lg px-4 py-2">
      delay-200
  </button>
  <button class="transition delay-500 ease-in-out text-slate-800
        bg-fuchsia-400 
        hover:bg-fuchsia-500
        rounded-lg px-4 py-2">
      delay-500
  </button>
  <button class="transition delay-1000 ease-in-out
        bg-orange-400 hover:bg-orange-500 
        rounded-lg px-4 py-2">
      delay-1000
  </button>
 </div> 
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Benefícios

Aqui estão alguns benefícios de usar a propriedade de retardo de transição no Tailwind CSS:

Adicionar um atraso a uma transição pode tornar a experiência do usuário mais suave e agradável. Um atraso pode ajudar o usuário a entender a relação entre dois estados diferentes de um elemento e também pode ajudar o usuário a perceber a animação com mais clareza.
Ao usar a propriedade de atraso de transição, você pode ter mais controle sobre o tempo de suas transições. Você pode especificar exatamente quando a transição deve começar e também pode criar sequências de temporização complexas que envolvem vários atrasos.
Ao adicionar um atraso a uma transição, você pode criar mais interesse visual em sua página da web. O atraso pode criar uma sensação de antecipação e também chamar a atenção do usuário para o elemento que está sendo animado.
Quando você usa a propriedade de atraso de transição no Tailwind CSS, pode melhorar o desempenho de sua página da web. Ao atrasar a transição, você pode reduzir a quantidade de animação que precisa ser processada pelo navegador, o que pode ajudar a reduzir a carga no dispositivo do usuário.

Nós valorizamos o seu feedback.

Atraso de transição de vento de cauda

O que é atraso de transição do Tailwind?

Classes de atraso de transição de vento de cauda

Sintaxe

Example:

Example:

Benefícios

Sentindo entediado?