Guia rápido para transições de vento favorável
Neste artigo, veremos mais de perto como a Tailwind Transition Property funciona e como ela pode ser usada para aprimorar a experiência do usuário em seu site.
No desenvolvimento web, animações e transições podem ser usadas para aprimorar a experiência do usuário e tornar as páginas da web mais dinâmicas e envolventes.
As transições são recursos CSS poderosos que permitem animações suaves entre diferentes estados de um elemento .
A classe de propriedade de transição é usada para especificar o nome da propriedade CSS na qual o efeito de transição ocorrerá.
Classes de propriedades de transição Tailwind
As classes de propriedade de transição foram examinadas abaixo:
| Aulas | Visão geral |
| transição-nenhuma | Esta classe é usada para especificar que os efeitos de transição não serão aplicados a nenhuma propriedade CSS. |
| transição-tudo | Todas as propriedades CSS terão um efeito de transição usando esta classe. Este também é o valor padrão para esta classe. |
| transição | É possível especificar quais propriedades CSS serão afetadas pelo efeito de transição. Várias propriedades podem ser especificadas separando-as com vírgulas. |
| cores de transição | Usando esta classe, as propriedades de cor, como cor de fundo, cor de borda, cor, preenchimento e traçado , terão um efeito de transição. |
| opacidade de transição | Nesse caso, a propriedade de opacidade adquirirá um efeito de transição. |
| sombra de transição | Esta classe é usada para especificar que um efeito de transição deve ser aplicado na propriedade box shadow. |
| transição-transformação | Essa classe especifica que as transições devem ser aplicadas apenas às propriedades de transformação de um elemento. |
Sintaxe
<element class="transition-shadow">...</element>
O exemplo a seguir ilustra algumas das classes de propriedade de transição:
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
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold my-2 text-slate-900"Transition Property Class in Tailwind CSS
class="text-gray-500 font-semibold my-2"Hover on the buttons for demonstration
class="bg-gray-200 w-full m-4 grid grid-cols-2 gap-4 p-5 font-medium"
class="transition-none duration-500 ease-in-out text-slate-800
bg-amber-300 hover:bg-amber-400 hover:scale-110
rounded-lg px-3 py-2"
transition-none
class="transition duration-500 ease-in-out text-amber-200
bg-slate-600 hover:bg-slate-700 hover:scale-110
rounded-lg px-3 py-2"
transition
class="transition-opacity duration-500 ease-in-out text-slate-800
bg-fuchsia-400 hover:bg-fuchsia-500 hover:scale-110
rounded-lg px-3 py-2 hover:opacity-70"
transition-opacity
class="transition-transform duration-500 ease-in-out
bg-orange-400 hover:bg-orange-500 hover:scale-110
rounded-lg px-3 py-2"
transition-transform
Algumas das classes de propriedades de transição não foram abordadas no exemplo anterior, elas foram implementadas abaixo:
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
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold my-2 text-slate-900"Transition Property Class in Tailwind CSS
class="text-gray-500 font-semibold my-2"Hover on the buttons for demonstration
class="bg-gray-200 w-full m-4 grid grid-cols-2 gap-4 p-5 font-medium"
class="transition-all duration-500 ease-in-out text-slate-800
bg-amber-300 hover:bg-amber-400 hover:scale-110
rounded-lg px-3 py-2"
transition-all
class="transition-colors duration-500 ease-in-out text-amber-200
bg-slate-600 hover:bg-slate-700 hover:scale-110 border-4
rounded-lg px-3 py-2 border-transparent hover:border-amber-200"
transition-colors
class="transition-shadow duration-500 ease-in-out text-slate-800
bg-fuchsia-400 hover:bg-fuchsia-500 hover:scale-110
rounded-lg px-3 py-2 hover:shadow-xl"
transition-shadow
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
