Olá! Aqui está o pequeno M. (estudando muito a versão VUE)
Hoje, vou compartilhar com vocês a animação e transição no Vue
Animações e transições são dois conceitos diferentes, mas podem atingir a mesma animação ou ser usados em combinação.
1. Uso básico
Vamos dar uma olhada na documentação oficial do VUE
Vue
transitionfornece componentes encapsulados para adicionar transições de entrada/saída a qualquer elemento e componente nos seguintes casos
- Renderização condicional (use
v-if)- Exibição condicional (use
v-show)- componentes dinâmicos
- nó raiz do componente
O exemplo a seguir usa v-show
Como a tag de modelo, a tag de transição não aparecerá na árvore DOM, mas colocar as tags que precisam de transição evitará muitos problemas desnecessários
Na transição de entrada/saída, haverá 6 trocas de classe.
v-enter: Define o estado inicial da transição para. Entra em vigor antes de o elemento ser inserido e é removido no próximo quadro após a inserção do elemento.v-enter-active: Define o estado em que a transição de entrada entra em vigor. Aplica-se em toda a transição de entrada, entra em vigor antes de o elemento ser inserido e é removido após a conclusão da transição/animação. Esta classe pode ser usada para definir tempos de processo de transição de entrada, atrasos e funções de curva.v-enter-to: Insira o estado final da transição conforme definido na versão 2.1.8 e superior . Entra em vigor no próximo quadro após o elemento ser inserido (e removido ao mesmov-entertempo ), removido após a conclusão da transição/animação.v-leave: Define o estado inicial da transição de saída. Entra em vigor imediatamente quando a transição de saída é acionada e é removida no próximo quadro.v-leave-active: Define o estado em que a transição de saída entra em vigor. Aplicado durante toda a fase de transição de saída, entra em vigor imediatamente quando a transição de saída é acionada e é removido após a conclusão da transição/animação. Esta classe pode ser usada para definir tempos de processo, atrasos e funções de curva para sair de transições.v-leave-to: A versão 2.1.8 e superior define o estado final da transição de saída. Entra em vigor no próximo quadro depois que a transição de saída é acionada (ev-leaveé ), removida após a conclusão da transição/animação.
e ilustrações oficiais
Se você entendeu a essência, parabéns, você pode clicar no X no canto superior direito ou deslizar para o próximo artigo.
↓↓↓ Mas você ainda está no nevoeiro, parabéns, você pode continuar lendo o conteúdo a seguir para entender o significado específico da imagem acima↓↓↓
2. Animação
A animação em css é uma combinação de animação e @keyframes, que devem ser escritos em VUE, mas a diferença é que o nome da classe em VUE será especificado e o VUE chamará o efeito de animação apropriado no momento certo
bibi não é nada, veja GIF
O código acima (veja os comentários no código para entender o significado da animação):
O atributo name é adicionado à transição para distinguir vários estilos de animação; se a transição não tiver um atributo name, o nome da classe padrão será .v
Use o verdadeiro/falso de moveBox para VUE para determinar se a div deve ser exibida
<button @click="moveBox = !moveBox">showBox</button>
<transition name="move">
<div class="moveBox" v-show="moveBox">这里是小M，现在是动画</div>
</transition>
复制代码export default {
name: "School",
data() {
return {
moveBox: true,
};
},
};
复制代码<style scoped>
/* 进场动画 .transition的name-enter（进入）-active */
.move-enter-active {
animation: move 1s linear;
}
/* 出场动画 .transition的name-leave（离开）-active*/
.move-leave-active {
animation: move 1s reverse;
}
@keyframes move {
from {
/*通过位移，让box消失在最左边 */
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.moveBox {
width: 200px;
height: 50px;
background-color: antiquewhite;
padding: 10px;
}
</style>
复制代码3. Transição
GIF：
Código:
Se você não combinar .v-enter-active e .v-leave-active, deverá adicionar um estilo de transição ao rótulo
Use o verdadeiro/falso de moveBox2 para VUE para determinar se deve exibir o div
<button @click="moveBox2 = !moveBox2">showBox</button>
<transition name="move2">
<div class="moveBox" v-show="moveBox2" style="transition: 1s linear">
这里是小M，现在是过渡
</div>
</transition>
复制代码export default {
name: "School",
data() {
return {
moveBox2: true,
};
},
};
复制代码<style scoped>
/* 进入的起点和离开的终点 样式相同 */
.move2-enter,
.move2-leave-to {
transform: translateX(-100%);
}
/* 离开的起点和进入的终点 样式相同 */
.move2-enter-to,
.move2-leave {
transform: translateX(0);
}
.moveBox {
width: 200px;
height: 50px;
background-color: antiquewhite;
padding: 10px;
}
</style>
复制代码Fiz um desenho superficialmente para todos entenderem os nomes das 4 classes acima:
4.animate.css biblioteca de terceiros
Instale via npm, npm install animate.css
Instale via yarn, yarn add animate.css
Após a conclusão da instalação, importe-o, importe 'animate.css'
O lado direito é o nome da classe, que pode ser copiado diretamente
Ao usar, você precisa adicionar esses três atributos à tag de transição:
name="animate__animated animate__bounce"
enter-active-class="animate__rubberBand"
leave-active-class="animate__swing"
复制代码Como o nome sugere,
- O primeiro é um nome fixo
- O nome da classe de animação da segunda abordagem
- O nome da classe de animação da terceira aparição
Basta selecionar o nome da classe que você deseja, copiá-lo e pronto~
GIF：
Código:
<button @click="animateBox = !animateBox">showBox</button>
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__rubberBand"
leave-active-class="animate__swing"
>
<div class="moveBox" v-show="animateBox">
这里是小M，现在是Animate.css
</div>
</transition>
复制代码import "animate.css";
export default {
name: "School",
data() {
return {
animateBox: true,
};
},
};
复制代码<style scoped>
.moveBox {
width: 200px;
height: 50px;
background-color: antiquewhite;
padding: 10px;
}
</style>
复制代码O compartilhamento de hoje está aqui. Se você quiser o código completo, pode me chamar na área de comentários ou mensagem privada