tiny-vue icon indicating copy to clipboard operation
tiny-vue copied to clipboard

✨ [Feature]: hope to add a transition component

Open GaoNeng-wWw opened this issue 1 year ago • 0 comments

What problem does this feature solve

Encapsulate some commonly used excessive animations

What does the proposed API look like

Take a Fade transition animation as an example

Props

type TransitionProps = {
  group?: boolean;
  animationFunction?: string;
}

How to use

<template>
  <div>
    <button @click="visible = !visible">Change Visible</button>
    <TinyFade>
      <h1 v-if="visible">Hello-world</h1>
    </TinyFade>
  </div>
</template>
<script setup>
import {Fade as TinyFade} from '@opentiny/vue';
import { ref } from 'vue';
const visible = ref(true);
</script>

Example

The following example is just a simple demonstration animation, and there may be some boundaries that were not considered. This animation is only a demonstration of the animation effect

2

GaoNeng-wWw avatar Jan 25 '24 07:01 GaoNeng-wWw