vue-petite-transition
TypeScript icon, indicating that this package has built-in type declarations

2.0.2 • Public • Published

Petite Vue Transition

Petite Transition Library for Petite Vue

Getting Started

Installation

npm install vue-petite-transition@latest
pnpm i vue-petite-transition
yarn add vue-petite-transition

CDN URLs

The short CDN URL is meant for prototyping. For production usage, use a fully resolved CDN URL to avoid resolving and redirect cost:

  • ESM build: https://unpkg.com/browse/vue-petite-transition@2.0.0/dist/vue-petite-transition.es.js

then in your html script where you defined your petite-vue instance

<script type="module">
import { createApp } from 'petite-vue'
import { transition } from 'vue-petite-transition'
// register the directive
createApp().directive('transition',transition).mount()
</script>

provided API for v-transition

  • v-transition:show
    • type: boolean
    • Whether the children should be shown or hidden
  • v-transition:enter
    • type: string
    • Classes added to the element during the entire enter phase.
    • e.g. v-transition:enter="duration-1000"
  • v-transition:enter-from
    • type: string
    • Classes added to the element before the enter phase starts.
    • e.g. v-transition:enter-from="opacity-0"
  • v-transition:enter-to
    • type: string
    • Classes added to the element immediately after the enter phase starts.
    • e.g. v-transition:enter-to="opacity-100"
  • v-transition:entered
    • type: string
    • Classes added to the element once the transition is done. These classes will persist after that, until it's time to leave.
    • e.g. v-transition:entered="opacity-100"
  • v-transition:leave
    • type: string
    • Classes added to the element during the entire leave phase.
    • e.g. v-transition:leave="duration-1000 ease-out"
  • v-transition:leave-from
    • type: string
    • Classes added to the element before the leave phase starts.
    • e.g. v-transition:leave-from="opacity-100"
  • v-transition:leave-to
    • type: string
    • Classes added to the element immediately after the leave phase starts.
    • e.g. v-transition:leave-to="opacity-0"

Example

** Just Passing enter enter-from enter-to values works **

<div v-scope="{ show:true }" class="h-96 w-96">
  <p>show: {{ show }}</p>
    <button @click="show = !show" class="px-2 bg-slate-900 py-0.5 flex items-center justify-center" > toggle </button>
  <div v-transition:show="!show"
    class="p-10 bg-sky-400 opacity-0 scale-90"
    v-transition:enter="duration-1000 transition-[opacity,transform]"
    v-transition:enter-from="opacity-0 scale-90"
    v-transition:enter-to="opacity-100 scale-100"
  >  Show {{!show}}
  </div>
</div>

Acknowledgement

Thanks, Now Have Fun Bye Bye !

Package Sidebar

Install

npm i vue-petite-transition

Weekly Downloads

4

Version

2.0.2

License

MIT

Unpacked Size

14.6 kB

Total Files

12

Last publish

Collaborators

  • sacarvy