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/[email protected]/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

• HeadlessUI
• CSS Based Transition VUEJS

Thanks, Now Have Fun Bye Bye !