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

| Prop | Description | Type | Default | | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- | | childClass | .zero-to-auto-container's child 's custom class | string | - | | isOpen | indicate the status of the component if it's open | boolean | false | | transitionDirectionAxis | input 'y' for y-axis (i.e., vertical transition), 'x' for x-axis (i.e., horizontal transition) | string | 'y' | | isOnHover | to transition when hovered by the cursor | boolean | true | | disableDefaultBgColor | remove the default background color (i.e., gray). You can put your custom background color on customClass prop | boolean | false | | disableDefaultPadding | remove the default padding (i.e., 10px). You can put your custom padding on customClass prop | boolean | false | | disableDefaultTransitionAll | remove the default transition (i.e., transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;). You can put your custom transition on customClass prop | boolean | false | | disableWidthFit | remove the default width (i.e., fit-content). You can put your custom width on customClass prop | boolean | false |