@uappi/public-animation

Este pacote fornece componentes de animação reutilizáveis para aplicações Vue 3

Instalação

Adicione o pacote ao seu projeto:

npm install @uappi/public-animation

Uso

Importe e utilize o componente desejado:

<template>
	<ExpandTransition>
		<div v-if="show">Conteúdo animado</div>
	</ExpandTransition>
</template>

<script setup lang="ts">
import { ExpandTransition } from '@uappi/core-animations';
import { ref } from 'vue';

const show = ref(true);
</script>

Componentes Disponíveis

• ExpandTransition: Componente de transição para expandir e recolher elementos com animação suave.

Exemplos de Uso por Componente

ExpandTransition

Componente para animar a expansão e recolhimento de elementos.

Props

| Prop | Tipo | Padrão | Descrição | |--------------|----------|----------|-------------------------------------------------------------------------------------| | mode | String | out-in | Define o modo de transição: 'in-out', 'out-in' ou 'default'. Segue padrão do Vue 3. |

Exemplo

<template>
	<ExpandTransition :duration="500" tag="section" :appear="true">
		<div v-if="show">Conteúdo animado</div>
	</ExpandTransition>
</template>

<script setup>
import { ExpandTransition } from '@uappi/core-animations';
import { ref } from 'vue';

const show = ref(true);
</script>