zero-trans-to-auto

Vue Component to Transition sizes(width, height) from 0 to auto. Not really, but we can get the same result by utilizing Grid.

https://www.npmjs.com/package/@mcjumaah/zero-trans-to-auto

The Problem:

Normally, we can't transition elements from height/width of 0 to auto.

Reference

My reference to the approach I utilized in this component is mainly from the YT video of Kevin Powell:

• https://youtu.be/B_n4YONte5A?si=qK1lGhhttpftBzYp
• https://keithjgrant.com/posts/2023/04/transitioning-to-height-auto/

Get started

Zero Transition To Auto

Install:

npm install @mcjumaah/zero-trans-to-auto

Then, import and register the component. The component itself does not include any CSS. You'll need to include it separately for the component to work

// main.ts or main.js

import { createApp } from "vue";
import App from "./App.vue";

import ZeroTransToAuto from "@mcjumaah/zero-trans-to-auto";
import "@mcjumaah/zero-trans-to-auto/styles.css";

createApp(App)
    .use(ZeroTransToAuto);
    .mount("#app");

Then insert the element you want to transition inside the component:

<template>
  <div>
    <ZeroTransToAuto> Insert Elements Here </ZeroTransToAuto>
  </div>
</template>

Props