tessl/npm-vuetify

Vue Material Component Framework implementing Google's Material Design specification with comprehensive UI components, theming system, and accessibility features.

—

Pending

Overview

Eval results

Files

Transitions

Name: tessl/npm-vuetify
Author: tessl

Vuetify provides 17 built-in transition components for smooth animations and visual effects. These include CSS-based transitions for common effects, JavaScript-based expand transitions, and specialized dialog transitions.

Capabilities

CSS Transitions

Standard CSS-based transitions with configurable timing and easing.

/**
 * Standard fade transition with configurable opacity changes
 */
const VFadeTransition: Component;

/**
 * Scale transition for zoom-in/zoom-out effects
 */
const VScaleTransition: Component;

/**
 * Slide transition along the X-axis (left to right)
 */
const VSlideXTransition: Component;

/**
 * Reverse slide transition along the X-axis (right to left)
 */
const VSlideXReverseTransition: Component;

/**
 * Slide transition along the Y-axis (top to bottom)
 */
const VSlideYTransition: Component;

/**
 * Reverse slide transition along the Y-axis (bottom to top)
 */
const VSlideYReverseTransition: Component;

/**
 * Scroll transition along the X-axis
 */
const VScrollXTransition: Component;

/**
 * Reverse scroll transition along the X-axis
 */
const VScrollXReverseTransition: Component;

/**
 * Scroll transition along the Y-axis
 */
const VScrollYTransition: Component;

/**
 * Reverse scroll transition along the Y-axis
 */
const VScrollYReverseTransition: Component;

/**
 * FAB (Floating Action Button) transition with rotation and scale
 */
const VFabTransition: Component;

JavaScript Transitions

Height and width expansion transitions using JavaScript for smooth animation.

/**
 * Expand/collapse transition that animates element height
 * Commonly used for accordions and collapsible content
 */
const VExpandTransition: Component;

/**
 * Expand/collapse transition that animates element width
 * Useful for horizontal expanding content
 */
const VExpandXTransition: Component;

Dialog Transitions

Specialized transitions designed for dialog and modal animations.

/**
 * Generic dialog transition with scale and fade effects
 */
const VDialogTransition: Component;

/**
 * Dialog transition that slides in from the bottom
 */
const VDialogBottomTransition: Component;

/**
 * Dialog transition that slides in from the top
 */
const VDialogTopTransition: Component;

Usage Examples

Basic CSS Transitions

import { VFadeTransition, VSlideYTransition } from 'vuetify/components';

// Template usage
<template>
  <div>
    <!-- Fade transition -->
    <VFadeTransition>
      <div v-if="show" class="content">
        Content that fades in/out
      </div>
    </VFadeTransition>
    
    <!-- Slide transition -->
    <VSlideYTransition>
      <VCard v-if="showCard" class="mx-auto" max-width="400">
        <VCardText>Card that slides in from top</VCardText>
      </VCard>
    </VSlideYTransition>
  </div>
</template>

Expand Transitions

import { VExpandTransition } from 'vuetify/components';

// Template usage for collapsible content
<template>
  <div>
    <VBtn @click="expanded = !expanded">
      Toggle Content
    </VBtn>
    
    <VExpandTransition>
      <div v-if="expanded">
        <VCard class="mt-4">
          <VCardText>
            This content expands and collapses smoothly
            by animating the height property.
          </VCardText>
        </VCard>
      </div>
    </VExpandTransition>
  </div>
</template>

Dialog Transitions

import { VDialog, VDialogTransition } from 'vuetify/components';

// Template usage for modal dialogs
<template>
  <VDialog v-model="dialog" max-width="500">
    <template #activator="{ props }">
      <VBtn v-bind="props">Open Dialog</VBtn>
    </template>
    
    <!-- Custom transition for dialog -->
    <VDialogTransition>
      <VCard>
        <VCardTitle>Dialog with Custom Transition</VCardTitle>
        <VCardText>
          This dialog uses a custom transition effect.
        </VCardText>
        <VCardActions>
          <VBtn @click="dialog = false">Close</VBtn>
        </VCardActions>
      </VCard>
    </VDialogTransition>
  </VDialog>
</template>

Transition Props

All transition components support standard Vue transition props:

interface TransitionProps {
  /** Enable/disable the transition */
  disabled?: boolean;
  /** Transition group mode */
  group?: boolean;
  /** Hide element when transition completes */
  hideOnLeave?: boolean;
  /** Leave absolute positioning during transition */
  leaveAbsolute?: boolean;
  /** Transition mode (in-out, out-in) */
  mode?: 'in-out' | 'out-in';
  /** Transition origin point */
  origin?: string;
}

Import Paths

// Import all transitions
import * as transitions from 'vuetify/components/transitions';

// Import individual transitions
import { 
  VFadeTransition, 
  VSlideYTransition, 
  VExpandTransition,
  VDialogTransition 
} from 'vuetify/components';

// Direct path imports
import VFadeTransition from 'vuetify/components/VFadeTransition';

Common Patterns

List Transitions

// Animate list items with staggered delays
<template>
  <TransitionGroup name="list" tag="div">
    <VCard
      v-for="item in items"
      :key="item.id"
      class="list-item mb-2"
    >
      <VCardText>{{ item.text }}</VCardText>
    </VCard>
  </TransitionGroup>
</template>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

Route Transitions

// Use transitions with Vue Router
<template>
  <VSlideXTransition mode="out-in">
    <router-view :key="$route.path" />
  </VSlideXTransition>
</template>

Install with Tessl CLI