Transições CSS em Nuxt.js: uma visão geral

Introdução

Uma boa animação é invisível. Você não deve perceber que está olhando para uma animação.- Pasquale D’Silva

As transições CSS são um tipo de animação que aprimora a experiência do usuário, criando uma continuidade visual suave entre as mudanças de estado. Boas transições devem ser quase imperceptíveis, enquanto transições mal projetadas podem criar um arrasto visível ou uma experiência instável em seu aplicativo.

Neste post, demonstrarei como criar transições incríveis no Nuxt.js, começando com o básico de como trabalhar com o Nuxt.js na construção de um aplicativo. Observe que você deve ter alguma familiaridade com Vue.js para poder acompanhar este tutorial.

O que são transições CSS?

Transições CSS ocorrem quando uma propriedade CSS muda de um valor para outro durante um período de tempo. Por exemplo, se quiséssemos mudar a cor de um elemento de vermelho para branco, poderíamos usar uma transição para mudar de uma cor para outra.

Como as transições devem ser fluidas e não abruptas, elas podem ajudar a criar uma melhor experiência do usuário, fornecer dicas visuais, manter o contexto e a continuação e melhorar o envolvimento do usuário.

Em CSS, as transições são controladas usando o atalho transição propriedade, com subpropriedades como duração da transição , função de tempo de transição e atraso de transição que permitem para adicionar um efeito de transição a qualquer elemento válido.

As transições são suportadas na maioria dos navegadores , embora haja alguns problemas menores com o Internet Explorer e Safari.

Primeiros passos com Nuxt.js

Nuxt.js é uma estrutura de aplicativo da web moderna, gratuita e de código aberto baseada em Vue.js, Node.js, webpack e Babel. O Nuxt.js nos permite criar três tipos de aplicativos, cada um dependendo do propósito de nossa construção:

• páginas estáticas
• Aplicativos de página única
• Aplicativos renderizados pelo lado do servidor (SSR)

Configurando nosso aplicativo Nuxt.js

Podemos criar nosso aplicativo Nuxt usando a ferramenta de scaffolding- create-nuxt-app -ou construindo do zero. Para nossos propósitos, usarei o primeiro.

Para começar, execute o seguinte usando o gerenciador de pacotes de sua escolha:

 npx create-nuxt-app 
//ou
yarn create nuxt-app 
//ou
npm init nuxt-app 

Certifique-se de substituir pelo nome do seu projeto/aplicativo.

Quando a instalação for concluída, será apresentada uma série de perguntas para ajudar a configurar nosso aplicativo para desenvolvimento, incluindo nome, opções Nuxt, estrutura de IU, TypeScript, linter, estrutura de teste e semelhantes.

As respostas a essas perguntas são principalmente de preferência pessoal. Esta é a aparência da minha configuração para este artigo:

Feito isso, executaremos o seguinte comando em nosso terminal:

 $ cd 
$ npm run dev

Com as etapas acima concluídas, nosso aplicativo deve estar sendo executado em http://localhost: 3000 . Isso é o que devemos ver:

Utilizando o componente de transição Vue.js

Nuxt.js usa o componente de transição do Vue para nos permitir criar transições incríveis entre nossas páginas e/ou rotas.

As transições são criadas atualizando os atributos de valor CSS quando nosso elemento ou componente Vue entra ou sai da tela. O componente de transição do Vue nos permite capturar os momentos antes, durante e depois da inserção ou remoção do elemento.

Conforme demonstrado na imagem abaixo, existem três classes para capturar as transições de entrada ( v-enter , v-enter-to e v-enter-active ) e outras três classes para capturar as transições de saída ( v-leave , v-leave-to e v-leave-active ).

Nota : Essas classes têm namespaces, portanto, o v seria substituído pela classe de transição CSS. Por exemplo, a classe fade seria assim: fade-leave , fade-leave-to e fade-leave-ativo .

Transições em Nuxt.js

As transições de página no Nuxt podem ser globais ou aplicadas a páginas individuais. As transições de página são baseadas em rota e podemos vê-las em ação quando navegamos para essa página usando nuxt-link .

Transições de página globais

Como o próprio nome indica, essas transições são adicionadas a todas as páginas de nosso aplicativo Nuxt a partir de apenas um arquivo: nuxt.config.js . Configurar transições de página globais é um processo de duas etapas.

Primeiro, devemos definir a transição e torná-la global. Para fazer isso, devemos criar um arquivo CSS global em nossa pasta de ativos. Para demonstrar, farei uso de uma transição de fade muito simples.

///assets/css/main.css .page-enter-active,
.page-leave-active { transição: opacidade 0,5s;
}
.page-enter,
.page-leave-active { opacidade: 0;
}

Observe que, neste exemplo, usei page em vez de fade . Isso ocorre porque page é o namespace de transição de página global padrão.

Se quiséssemos substituir o namespace padrão e usar o nosso próprio, teríamos que usar a propriedade pageTransition para substituir o nome da transição padrão, da seguinte maneira:

///nuxt.config.js pageTransition:"fade"

Feito isso, podemos usar o código abaixo:

///assets/css/main.css .fade-enter-active,
.fade-leave-active { transição: opacidade 0,5s;
}
.fade-enter,
.fade-leave-active { opacidade: 0;
}

Depois de definir a transição, devemos incluir o arquivo CSS no arquivo nuxt.config.js para que todas as páginas do aplicativo possam usá-lo. Para fazer isso, usaremos o seguinte código:

///nuxt.config.js css: [ '~/assets/css/main.css'
],

Transições de página individuais

Para transições de página individuais, precisaremos definir a transição usando a chave de transição em cada página. Para isso, iremos para a página desejada e adicionaremos o código abaixo:

///Sobre.vue export default { transição:'fade'
}

É simples assim! Também podemos usar a opção object para definir nossas propriedades de transição.

Transições de layout

As transições de layout são globais por natureza e têm um valor padrão de layout . A propriedade layoutTransition nos permite aplicar transições com base no layout da página. Funciona de forma semelhante a pageTransition , mas aplica a animação ao layout em vez da página.

Aqui está um exemplo:

///nuxt.config.js
layoutTransition:'fade' //ou
layoutTransition: { nome:"fade", modo:"out-in"
},

Nota: O exemplo transições que eu compartilhei neste artigo todo o foco em opacidade . Não é preciso dizer que nós podemos realizar outros tipos de transições .

Valores de transição

Até agora, usamos apenas a transição fade , mas podemos, é claro, aproveitar outros tipos de valores de transição em nosso aplicativo Nuxt. Por padrão, o Nuxt procurará esses nomes de classe em nosso arquivo CSS global.

Embora o valor de transição seja definido como string por padrão, existem outras maneiras de atribuir valores CSS, como objeto e função .

Por exemplo, vamos definir o valor de transição para objeto , como no bloco abaixo:

 export default { //namekey torna-se necessária transição: { nome:'salto' }
}

Agora podemos adicionar mais propriedades, como modo e appear :

 export default { //namekey torna-se necessária transição: { nome:"salto", modo:"in-out",//o padrão é out-in apareça: verdadeiro,//o padrão é falso }
}

Aqui está o que está acontecendo: a propriedade modo out-in (que é o modo padrão) espera que o elemento atual saia antes que o novo elemento entre. o mesmo é verdade, apenas vice-versa, para in-out .

A segunda propriedade, appear , nos permite aplicar transições na renderização inicial; por padrão, seu valor é definido como falso e podemos personalizá-lo facilmente ao definir nossa transição no formato do objeto.

Conclusão

Neste artigo, aprendemos sobre as transições CSS e como fazer uso das transições dentro das páginas e rotas no Nuxt.js. Para explorar mais o tópico, aqui estão alguns recursos úteis:

• animações CSS em Vue.js , a partir dos documentos Vue
• Transição entre componentes em Vue.js , também a partir dos documentos Vue
• O componente de transição do Nuxt.js , dos documentos do Nuxt
• Animações da web com HTML, CSS e JavaScript , do seu verdadeiramente

A postagem Transições CSS em Nuxt.js: uma visão geral apareceu primeiro no LogRocket Blog .

Source link