Transições CSS em Vuejs e Nuxtjs

Transições são um módulo de CSS que permite criar transições graduais entre os valores de propriedades CSS específicas. O comportamento dessas transições pode ser controlado especificando sua função de temporização, duração e outros atributos. Usar essas transições em seus aplicativos e sites cria uma experiência visual melhor e, às vezes, chama e prende a atenção do usuário enquanto uma informação está sendo apresentada ou saindo da tela. De acordo com o Can I Use, as transições são suportadas pela maioria dos navegadores, embora existam alguns pequenos problemas com o Internet Explorer e o Safari.

Vue.js é uma estrutura JavaScript de código aberto para criar aplicativos da Web voltados para o cliente e aplicativos de página única (SPA). Um dos recursos dessa estrutura é a capacidade de adicionar transições a um aplicativo sem problemas, alternar entre páginas ou componentes, e veremos como fazer isso neste tutorial.

Nuxt.js também é uma estrutura JavaScript, construída em cima do Vue.js (e muitas vezes referida como uma estrutura de uma estrutura), para criar aplicativos da Web do lado do servidor, sites gerados estáticos, bem como SPAs. Funciona da mesma forma que o Vue.js, portanto, se você conhece o Vue.js, não deve ter muitos problemas para começar a usar o Nuxt.js. O Nuxt.js vem com duas propriedades para adicionar transições a um aplicativo, e vamos abordá-las também neste tutorial.

Este tutorial requer conhecimento básico de Vue.js ou Nuxt.js. Todos os trechos de código neste tutorial podem ser encontrados no GitHub.

O que é uma transição?

De acordo com o Oxford Dictionary, uma transição pode ser definida como:

“Uma passagem em um texto que conecta suavemente dois tópicos ou seções entre si.

O processo ou um período de mudança de um estado ou condição para outro.”

Em termos de física, uma transição é definida assim:

“Mudança de um átomo, núcleo, elétron, etc., de um estado quântico para outro, com emissão ou absorção de radiação.”

A partir dessas definições, temos uma ideia do que é uma transição. Todas as definições envolvem duas coisas ou estados diferentes. Em termos de código, uma transição não é tão diferente.

O que é uma transição CSS?

De acordo com a documentação da web da Mozilla:

“CSS Transitions é um módulo de CSS que permite criar transições graduais entre os valores de propriedades CSS específicas. O comportamento dessas transições pode ser controlado especificando sua função de temporização, duração e outros atributos.”

Isso significa que podemos definir uma transição CSS como: a mudança na propriedade CSS de um ou mais elementos de um valor para outro.

A propriedade de transition CSS nos permite adicionar um efeito de transição a qualquer elemento válido. Consiste em até quatro outras propriedades (cinco, se contarmos a própria propriedade de transition ) que podem ser usadas individualmente ou combinadas como um atalho. Cada propriedade tem uma função diferente.

transition-property

A transition-property aceita o nome da propriedade CSS sobre a qual queremos observar as alterações e cujo processo de alteração desejamos fazer a transição. Se parece com isso:

 .btn { width: 200px; height: 50px; transition-property: width; background-color: red; color: #fff; border: 0; }

Mas esta propriedade não faz nada sem a próxima propriedade.

transition-duration

A propriedade transition-duration especifica o tempo que a mudança do(s) elemento(s) na transition-property deve durar. Essa propriedade é necessária para que a transição funcione. Se não estiver definido (com um valor maior que 0s ), o valor padrão de 0s significaria que não seria executado. Então, vamos definir uma duração para essa transição:

 .btn { width: 200px; transition-property: width; transition-duration: 2s; background-color: red; color: #fff; border: 0; }

Aqui, temos um elemento com um nome de classe de btn que possui uma largura de 200px . Estamos usando as transition-property transition-duration da transição aqui. O que isso significa é: “Ei, CSS, fique atento quando a propriedade width mudar e, quando isso acontecer, deixe o efeito demorar 2s para mudar”.

Então, se tivermos um botão com um nome de classe de btn , o arquivo index.html ficaria assim:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Transitions</title> <link rel="stylesheet" href="./assets/styles.css"> </head> <body> <Section> <h1>Hi CSS Transitions</h1> <button class="btn">Hover on me to see a cool transition</button> </Section> </body> </html>

Aqui, temos um arquivo HTML que contém um botão com uma classe que possui transition-property transition-duration observando as alterações na largura do elemento.

Uma coisa a notar é que, para que a transição em nosso botão funcione, temos que realmente alterar a largura desse elemento, seja ajustando manualmente a largura com as ferramentas do desenvolvedor no navegador, usando um dos pseudo CSS -classes ou usando JavaScript. Para o propósito deste tutorial, vamos usar a pseudo-classe CSS :hover para alterar a largura do botão:

 // existing styles .btn:hover { width: 300px; }

Agora, se passarmos o mouse sobre este botão, devemos ver a largura do botão aumentar gradualmente ao longo do tempo definido, que é de 2s .

Veja a propriedade de transição da caneta e duração da transição de Timi Omoyeni (@timibadass) no CodePen.

transition-timing-function

A propriedade da transition-timing-function determina a velocidade na qual o efeito de transição ocorre. Cinco valores estão disponíveis para esta propriedade:

• ease
  Isso (o padrão) especifica um efeito de transição que começa lentamente, depois fica rápido e termina lentamente.
• linear
  Isso especifica um efeito de transição com a mesma velocidade do início ao fim.
• ease-in
  Isso especifica um efeito de transição com um início lento.
• ease-out
  Isso especifica um efeito de transição com um final lento.
• ease-in-out
  Isso especifica um efeito de transição com início e fim lentos.
• cubic-bezier(n,n,n,n)
  Isso permite que você defina seus próprios valores em uma função cúbica-bezier.

Portanto, se adicionarmos ease-in ao nosso botão, devemos notar a velocidade na qual a width e a height mudam, em comparação com a velocidade na qual o botão retorna ao seu estado normal. Aqui está nossa folha de styles.css atualizada:

 .btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: ease-in; background-color: red; color: #fff; border: 0; }

Se quisermos um efeito de velocidade mais dramático ou a liberdade de definir um efeito de velocidade específico, podemos usar cubic-bezier(n,n,n,n) :

 btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); background-color: red; color: #fff; border: 0; } 

Veja a função de tempo de transição da caneta por Timi Omoyeni (@timibadass) no CodePen.

Uma coisa interessante sobre esse valor é que você pode editá-lo diretamente no navegador usando as ferramentas do desenvolvedor.

Se você clicar na parte destacada de suas ferramentas de desenvolvedor, obterá uma interface para modificar as opções cubic-bezier :

Conforme você move os dois pontos, os valores de (n,n,n,n) mudam e você verá uma representação (destacada em vermelho) de como o efeito de velocidade aparecerá. Isso pode ser muito útil quando você tem um efeito de velocidade específico em mente.

transition-delay

A propriedade transition-delay define quanto tempo (em segundos) a transição deve esperar antes que seu efeito comece a ocorrer. Este tempo é diferente da propriedade transition-duration , que especifica por quanto tempo o efeito de transição ocorrerá.

 .btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-delay: 5s; background-color: red; color: #fff; border: 0; }

Se você tentar isso no navegador, notará um atraso antes que a width do elemento comece a mudar. Isso ocorre por causa da propriedade transition-delay e do valor que definimos.

Veja o atraso de transição da caneta por Timi Omoyeni (@timibadass) no CodePen.

Propriedade abreviada

As propriedades de transição individuais podem ser tediosas de usar. Por esse motivo, temos a propriedade abreviada: transition . Ele aceita todas as propriedades em uma ordem definida:

 { transition: abcd; }

Aqui, as letras correspondem da seguinte forma:

• a: transition-property
• b: transition-duration
• c: transition-timing-function
• d: transition-delay

Podemos refatorar nossa transição existente para funcionar usando esta propriedade abreviada:

 // from .btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-delay: 1s; background-color: red; color: #fff; border: 0; } // to .btn { width: 200px; height: 50px; transition: width 2s cubic-bezier(0.075, 0.82, 0.165, 1) 1s; background-color: red; color: #fff; border: 0; }

Se tentarmos este código no navegador, obteremos o mesmo efeito de transição que obtivemos quando usamos as propriedades individuais.

Veja a propriedade Caneta usando taquigrafia de Timi Omoyeni (@timibadass) no CodePen.

Transições no Vue.js

O Vue.js vem com duas maneiras diferentes de adicionar transições a um aplicativo. Isso não significa que não podemos usar transições da maneira CSS. Significa apenas que os desenvolvedores do Vue.js construíram em cima do CSS para facilitar o uso de transições. Vamos olhar para eles um por um.

Transição de elementos e componentes individuais

Uma maneira de usar transições no Vue.js é envolver o componente de transition em torno de um elemento ou componente, usando qualquer um dos seguintes:

• renderização condicional (usando v-if ),
• exibição condicional (usando v-show ),
• componentes dinâmicos,
• nós raiz do componente.

Quando estamos desenvolvendo um aplicativo, há casos em que queremos exibir dados para o usuário dependendo de um valor (como um booleano). Aqui está um exemplo de como isso funciona, retirado do arquivo index.vue :

 <template> <div> <p v-if="show">Now you see me!</p> <p v-else>Now you don't!</p> <button @click="show = !show">click me</button> </div> </template> <script> export default { data() { return { show: true } } } </script> <style> </style>

Adicionamos dois parágrafos a esta página que aparecem dependendo do valor de show . Também temos um botão que altera o valor de show quando clicado. Adicionaremos esta página ao nosso arquivo App.vue importando-o assim:

 <template> <div> <Index /> </div> </template> <script> import Index from "./components/index.vue"; export default { name: 'App', components: { Index } } </script>

Se abrirmos o navegador, devemos ver nosso parágrafo e botão:

Neste momento, clicar no botão altera apenas o valor de show , o que faz com que o texto visível seja alterado:

A adição de uma transição a este parágrafo pode ser feita envolvendo ambos os parágrafos no componente de transition . Este componente aceita um name prop, que é muito importante para que a transição funcione.

 <template> <div> <transition name="fade"> <p v-if="show">Now you see me!</p> <p v-else>Now you don't!</p> </transition> <button @click="show = !show">click me</button> </div> </template>

Este nome diz ao Vue.js qual transição aplicar aos elementos ou componentes dentro deste componente de transition . Neste ponto, se clicarmos no botão, ainda não notamos nenhuma transição porque ainda temos que adicionar a configuração para nossa transição na forma de classes CSS.

Uma coisa a notar é que, ao usar uma transição entre dois elementos da mesma tag, precisamos especificar um atributo de chave em cada elemento para que a transição ocorra.

 <template> <div> <transition name="fade"> <p v-if="show" key="visible">Now you see me!</p> <p v-else key="notVisible">Now you don't!</p> </transition> <button @click="show = !show">click me</button> </div> </template>

O Vue.js tem seis classes de transição que são aplicadas aos elementos ou componentes dentro do componente de transition , e cada uma dessas classes representa um estado no processo de transição. Veremos apenas alguns deles.

v-enter

A classe v-enter representa o “estado inicial para enter”. Este é o ponto em que uma condição ( v-if ou v-else ) foi atendida e o elemento está prestes a se tornar visível. Neste ponto, a classe foi adicionada ao elemento e é removida assim que o elemento é adicionado. O name prop (neste caso, fade ) anexado ao componente de transition é prefixado para este nome de classe, mas sem o v . Este v pode ser usado por padrão se o name não for fornecido. Assim, podemos adicionar esta classe ao nosso arquivo index.vue :

 <style> p { color: green; } .fade-enter{ color: red; transform: translateY(20px); } </style>

Primeiro, adicionamos uma color green a todos os parágrafos da página. Em seguida, adicionamos nossa primeira classe de transição, fade-name . Dentro desta classe, mudamos a color para vermelho e utilizamos a propriedade transform e translateY para mover o parágrafo em 20px ao longo do eixo y (verticalmente). Se tentarmos clicar no botão novamente, perceberemos que muito pouca ou nenhuma transição ocorre durante a troca porque precisamos adicionar esta próxima classe que veremos.

v-enter-active

A classe v-enter-active representa o estado de “entrada total” de um elemento em transição. Isso significa que essa classe é adicionada logo antes do elemento ser inserido ou se tornar visível e é removida quando a transição termina. Esta classe é importante para v-enter funcionar porque pode ser usada para adicionar a propriedade de transition CSS à classe, junto com suas propriedades ( transition-property , transition-duration , transition-timing-function e transition-delay ), alguns dos quais são necessários para que o efeito de transição funcione. Vamos adicionar esta classe ao nosso aplicativo e ver o que acontece:

 .fade-enter-active { transition: transform .3s cubic-bezier(1.0, 0.5, 0.8, 1.0), color .5s cubic-bezier(1.0, 0.5, 0.8, 1.0); } 

Veja a transição Pen vue entrar no estado por Timi Omoyeni (@timibadass) no CodePen.

Agora, se clicarmos no botão, notamos a transição da cor e a posição de cada um dos textos à medida que aparecem. Mas a transição de visible para hidden não é suave o suficiente porque nenhuma transição está acontecendo.

v-leave-active

A classe v-leave-active representa todo o estado em que um elemento muda de visible para hidden . Isso significa que essa classe é aplicada a partir do momento em que um elemento começa a sair da página e é removida assim que a transição termina. Essa classe é importante para que uma transição de leave seja aplicada porque ela recebe a propriedade de transition do CSS, que também recebe outras propriedades de transição. Vamos adicionar isso ao nosso aplicativo e ver o que acontece:

 .fade-leave-active { transition: transform 1s cubic-bezier(1.0, 0.5, 0.8, 1.0), color 1s cubic-bezier(1.0, 0.5, 0.8, 1.0); } 

Veja a transição Pen vue deixar o estado ativo por Timi Omoyeni (@timibadass) no CodePen.

Ao clicar no botão agora, notamos que o elemento que deveria sair espera aproximadamente 2 segundos antes de desaparecer. Isso ocorre porque o Vue.js espera que a próxima classe com essa transição seja adicionada para que ela tenha efeito.

v-leave-to

A transição v-leave-to representa o estado de “saída”, significando o ponto em que um elemento começa a sair e sua transição é acionada. Ele é adicionado um quadro depois que uma transição de saída é acionada e removido quando a transição ou animação termina. Vamos adicionar esta classe ao nosso aplicativo e ver o que acontece:

 .fade-leave-to { transform: translateX(100px); color: cyan; }

Clicando no botão, notamos que cada elemento que está saindo está deslizando para a direita à medida que a cor muda.

Veja a transição do Pen vue para o estado por Timi Omoyeni (@timibadass) no CodePen.

Agora que entendemos como as transições funcionam no Vue.js, aqui está uma imagem que reúne tudo:

Finalmente, observe a transição não tão suave que ocorre durante os estados de entrada e saída de elementos que estão em transição. Isso ocorre porque as transições do Vue.js ocorrem simultaneamente. Vue.js tem um prop de mode que nos ajuda a alcançar um processo de transição muito suave. Esta prop aceita um dos seguintes valores:

• in-out
  O novo elemento faz a transição primeiro e, quando estiver concluído, o elemento atual faz a transição.
• out-in
  O elemento atual faz a transição primeiro e, quando concluído, o novo elemento faz a transição.

Se adicionarmos este mode ao nosso arquivo index.vue e tentarmos novamente, veremos uma transição melhor:

 <template> <div> <transition name="fade" appear mode="out-in"> <p v-if="show" key="visible">Now you see me!</p> <p v-else key="notVisible">Now you don't!</p> </transition> <button @click="transitionMe">click me</button> </div> </template>

Agora, se clicarmos no botão, perceberemos que um elemento sai antes que outro entre. Este é um resultado do mode que selecionamos para esta transição. Se tentarmos o outro modo, teremos um comportamento diferente.

Veja a transição Pen vue com modo por Timi Omoyeni (@timibadass) no CodePen.

Listar transições

Se você tentar adicionar transições a mais de um elemento por vez usando o componente de transition , um erro será impresso no console:

Isso ocorre porque o componente de transition não se destina a renderizar mais de um elemento por vez. Se quisermos fazer a transição de dois ou mais elementos ao mesmo tempo ou renderizar uma lista (usando v-for ), usamos o componente transition-group . Este componente também aceita uma prop name , mas tem algumas diferenças em relação ao componente de transition , incluindo o seguinte:

• Um atributo de chave é necessário para cada elemento dentro deste componente.
• Não há necessidade do mode prop porque mais de um elemento seria renderizado por vez.
• Um elemento span é renderizado por padrão, mas pode ser modificado especificando uma tag prop ao definir o componente transition-group . Vejamos um exemplo (em nosso arquivo listTransition.vue ):

 <template> <div> <h1>List/Group Transition</h1> <ul> <li v-for="user in users" :key="user.id"> {{user.name}} <button>Remove</button> </li> </ul> </div> </template> <script> export default { data() { return { users: [ { name: "Vuejs", id: 1 }, { name: "Vuex", id: 2 }, { name: "Router", id: 3 } ] }; } }; </script> <style> </style>

Aqui, temos uma matriz de users , que percorremos usando v-for , exibindo o nome em nossa seção de modelo. Para podermos visualizar esta lista, precisamos importar este componente para a página App.vue :

 <template> <div> <Index /> <listTransition /> </div> </template> <script> import Index from "./components/index.vue"; import listTransition from "./components/listTransition.vue"; export default { name: "App", components: { Index, listTransition } }; </script>

Observe que ao usar o componente transition-group , em vez de envolver nossa lista com uma tag ul (ou qualquer tag que tenhamos em mente), envolvemos o componente transition-group e adicionamos a tag à tag prop, assim:

 <template> <div> <h1>List/Group Transition</h1> <transition-group name="slide-fade" tag='ul'> <li v-for="user in users" :key="user.id"> {{user.name}} <button>Remove</button> </li> </transition-group> </div> </template> <script> export default { data() { return { users: [ { name: "Vuejs", id: 1 }, { name: "Vuex", id: 2 }, { name: "Router", id: 3 } ] }; } }; </script> <style> .slide-fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-leave-active { transition: transform 1s cubic-bezier(1, 0.5, 0.8, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-enter { color: mediumblue; transform: translateY(20px); } .slide-fade-leave-to { transform: translateX(100px); color: cyan; } </style>

Aqui, substituímos a tag ul pelo componente transition-group e adicionamos o ul como o valor da propriedade da tag . Se inspecionarmos a página atualizada nas ferramentas do desenvolvedor, veremos que a lista está sendo encapsulada no elemento que especificamos na tag prop (ou seja, ul ).

Também adicionamos um prop de name de transição com um valor de slide-fade a este componente, com regras de estilo abaixo na seção de style que seguem esta convenção de nomenclatura. Para que isso funcione, precisamos adicionar as seguintes linhas de código ao nosso arquivo:

 <template> <div> <h1>List/Group Transition</h1> <transition-group name="slide-fade" tag="ul"> <li v-for="user in users" :key="user.id"> {{user.name}} <button @click="removeUser(user.id)">Remove</button> </li> </transition-group> </div> </template> <script> export default { // ... methods: { removeUser(id) { let users = this.users.filter(user => user.id !== id); this.users = users; } } }; </script>

Na seção de modelo, adicionamos um evento de clique a cada botão no loop e passamos o user.id para o método removeUser anexado a esse evento de clique. Em seguida, criamos essa função na seção de script do nosso arquivo. Esta função aceita um id como argumento. Em seguida, percorremos nossos usuários existentes e filtramos o usuário com o id passado para esta função. Feito isso, salvamos nosso novo array de usuários nos dados de nossa página.

Neste ponto, se você clicar em qualquer um dos botões para os usuários, um efeito de transição será aplicado à medida que o usuário estiver sendo removido da lista.

Veja a transição da lista Pen Vue por Timi Omoyeni (@timibadass) no CodePen.

Transições no Nuxt.js:

Adicionar transições a um aplicativo Nuxt.js é bem diferente de como você pode estar acostumado no Vue.js. No Nuxt.js, o componente de transition é adicionado automaticamente ao aplicativo para você. Tudo que você precisa fazer é um dos seguintes.

Adicione-o ao componente de página individual

O Nuxt.js nos permite adicionar transições a um componente de página individual sem problemas. Essa transição é aplicada enquanto o usuário navega para esta página. Tudo o que precisamos fazer é adicionar uma propriedade de transition à seção de script do componente. Essa propriedade pode ser uma string, uma função ou um objeto. Algumas das propriedades que aceita são:

• name ,
• mode ,
• css .

Assim como o Vue.js, o Nuxt.js tem um name padrão que é atribuído a uma classe de transição se nenhum name for fornecido e é chamado de page . Vamos ver como isso funciona quando o adicionamos ao nosso aplicativo em transition.vue :

 <template> <div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore libero odio, asperiores debitis harum ipsa neque cum nulla incidunt explicabo ut eaque placeat qui, quis voluptas. Aut necessitatibus aliquam veritatis. </p> <nuxt-link to="/">home</nuxt-link> </div> </template> <script> export default { transition: { name: "fade", mode: "out-in" }, data() { return { show: true }; } }; </script> <style> p { color: green; } .fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .fade-leave-active { transition: transform 1s cubic-bezier(1, 0.5, 0.8, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1); } .fade-enter { color: mediumblue; transform: translateY(20px); } .fade-leave-to { transform: translateX(100px); color: cyan; } </style>

Nesta página, exibimos “lorem ipsum” na seção de modelos. Também adicionamos a propriedade de transition , para a qual passamos um objeto cujo name está definido como fade e cujo mode está definido como out-in . Por fim, na seção de style , adicionamos alguns estilos que controlam a transição conforme o usuário navega entre esta página e outra.

Para que essa transição funcione, temos que navegar para /transition , mas não notamos nenhuma transição se inserirmos manualmente essa rota em nosso navegador. Então, vamos adicionar um link para esta página na página index.vue .

 <template> <div class="container"> <div> // .. <nuxt-link to="/transition">next page</nuxt-link> </div> </div> </template>

Agora, se clicarmos no link em qualquer uma das duas páginas, perceberemos uma transição deslizante à medida que o navegador se move para e da rota /transition .

pageTransition

Adicionar transições a páginas individuais pode ser um desafio se quisermos adicioná-las a todas as páginas do aplicativo. É aí que entra o pageTransition . Essa propriedade nos permite adicionar uma configuração geral para todas as nossas páginas no arquivo nuxt.config.js . Esta propriedade aceita tanto uma string quanto um objeto como opção. Vamos ver como isso funciona em nuxt.config.js :

 export default { // ... /* ** Global CSS */ css: [ '~/assets/transition.css' ], pageTransition: { name: "fade", mode: "out-in" }, }

Aqui, adicionamos o link para um arquivo CSS, que criaremos em breve. Também adicionamos a propriedade pageTransition ao arquivo, juntamente com sua configuração. Agora, vamos criar nosso arquivo CSS, transition.css e adicionar os seguintes estilos a ele:

 .fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .fade-leave-active { transition: transform 1s cubic-bezier(1, 1, 1, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1); } .fade-enter { color: mediumblue; transform: translateY(20px); } .fade-leave-to { transform: translate3d(-500px, -300px 400px); color: cyan; }

Adicionamos as classes e estilos que serão aplicados na transição entre uma rota e outra. Se nos livrarmos da configuração de transition.vue da página transition.vue e tentarmos navegar entre as duas páginas, obteremos um efeito de transição.

layoutTransition

A propriedade layoutTransition nos permite aplicar transições com base no layout em que a página está. Funciona da mesma forma que pageTranslation , exceto que funciona com base no layout . O nome de transição padrão é layout . Aqui está um exemplo de como funciona, em nuxt.config.js :

 export default { // ... /* ** Global CSS */ css: [ '~/assets/transition.css' ], layoutTransition: { name: "fade", mode: "out-in" }, }

Observe que fade deve ser o nome do layout para que a transição funcione com seu layout. Vamos criar este novo layout em newLayout.vue para ver o que quero dizer:

 <template> <!-- Your template --> <div> <h1>new layout</h1> </div> </template> <script> export default { layout: "blog" // page component definitions }; </script>

Conclusão

Aprendemos sobre transições CSS e como criá-las usando as propriedades de transição individualmente ( transition-property , transition-duration , transition-timing-function e transition-delay ) e usando a propriedade abreviada de transition . Também abordamos como aplicar essas transições no Vue.js e no Nuxt.js. Mas isso não é tudo. O Vue.js tem mais maneiras de aplicarmos transições em um aplicativo:

• “Animações CSS”, Vue.js
• “Transição entre componentes”, Vue.js
• “Transições de Estado”, Vue.js

Recursos Relacionados

• “Transições CSS”, MDN Web Docs
• “transição” (definição), Léxico
• “Transições CSS”, W3Schools
• “Entrar/Sair e Listar Transições”, Vue.js
• Entrar/sair do gráfico, Vue.js
• “API: a propriedade de transition de página”, Nuxt.js
• “API: propriedades de transição”, Nuxt.js
• “Transições de página e layout em Nuxt.js”, Debbie O'Brien, DEV