CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-quasar--extras

Comprehensive collection of web fonts, icons, and animations for the Quasar Framework

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

animations.mddocs/

Animations

Animate.css integration providing curated animation class lists for smooth transitions and effects in web applications. Organized into logical categories for easy selection and usage.

Capabilities

Animation Lists

Pre-curated lists of animation class names from Animate.css v4.1.1.

/**
 * Animation class name arrays from Animate.css
 * Each array contains strings that correspond to CSS animation classes
 */

/**
 * General animations - attention-seeking effects that can loop
 * Used for drawing attention to elements or indicating activity
 */
export declare const generalAnimations: string[];

/**
 * Entrance animations - effects for elements appearing/entering
 * Used when showing elements, modals, notifications, etc.
 */
export declare const inAnimations: string[];

/**
 * Exit animations - effects for elements disappearing/leaving
 * Used when hiding elements, closing modals, removing notifications, etc.
 */
export declare const outAnimations: string[];

General Animations

Attention-seeking animations that can be used repeatedly or for ongoing effects.

/**
 * General animations array contents
 * 16 attention-seeking animation classes
 */
const generalAnimations = [
  'bounce',        // Bouncing effect
  'flash',         // Flashing opacity
  'flip',          // 3D flip effect
  'headShake',     // Head shaking motion
  'heartBeat',     // Pulsing heart-like effect
  'hinge',         // Door hinge falling effect
  'jello',         // Jello-like wobbling
  'pulse',         // Subtle pulsing scale
  'rubberBand',    // Rubber band stretching
  'shake',         // Horizontal shaking
  'shakeX',        // Horizontal shake (alias)
  'shakeY',        // Vertical shaking
  'swing',         // Swinging pendulum motion
  'tada',          // Celebratory tada effect
  'wobble'         // Wobbling motion
];

Entrance Animations

Animations for elements entering or appearing on screen.

/**
 * Entrance animations array contents
 * 42 different entrance effect classes
 */
const inAnimations = [
  // Back in animations
  'backInDown',
  'backInLeft', 
  'backInRight',
  'backInUp',
  
  // Bounce in animations
  'bounceIn',
  'bounceInDown',
  'bounceInLeft',
  'bounceInRight', 
  'bounceInUp',
  
  // Fade in animations
  'fadeIn',
  'fadeInBottomLeft',
  'fadeInBottomRight',
  'fadeInDown',
  'fadeInDownBig',
  'fadeInLeft',
  'fadeInLeftBig',
  'fadeInRight',
  'fadeInRightBig',
  'fadeInTopLeft',
  'fadeInTopRight',
  'fadeInUp',
  'fadeInUpBig',
  
  // Flip in animations
  'flipInX',
  'flipInY',
  
  // Special entrance effects
  'jackInTheBox',
  'lightSpeedInLeft',
  'lightSpeedInRight',
  'rollIn',
  
  // Rotate in animations
  'rotateIn',
  'rotateInDownLeft',
  'rotateInDownRight',
  'rotateInUpLeft',
  'rotateInUpRight',
  
  // Slide in animations
  'slideInDown',
  'slideInLeft',
  'slideInRight',
  'slideInUp',
  
  // Zoom in animations
  'zoomIn',
  'zoomInDown',
  'zoomInLeft',
  'zoomInRight',
  'zoomInUp'
];

Exit Animations

Animations for elements leaving or disappearing from screen.

/**
 * Exit animations array contents
 * 42 different exit effect classes matching entrance animations
 */
const outAnimations = [
  // Back out animations
  'backOutDown',
  'backOutLeft',
  'backOutRight', 
  'backOutUp',
  
  // Bounce out animations
  'bounceOut',
  'bounceOutDown',
  'bounceOutLeft',
  'bounceOutRight',
  'bounceOutUp',
  
  // Fade out animations
  'fadeOut',
  'fadeOutBottomLeft',
  'fadeOutBottomRight',
  'fadeOutDown',
  'fadeOutDownBig',
  'fadeOutLeft',
  'fadeOutLeftBig', 
  'fadeOutRight',
  'fadeOutRightBig',
  'fadeOutTopLeft',
  'fadeOutTopRight',
  'fadeOutUp',
  'fadeOutUpBig',
  
  // Flip out animations
  'flipOutX',
  'flipOutY',
  
  // Special exit effects
  'lightSpeedOutLeft',
  'lightSpeedOutRight',
  'rollOut',
  
  // Rotate out animations
  'rotateOut',
  'rotateOutDownLeft',
  'rotateOutDownRight',
  'rotateOutUpLeft',
  'rotateOutUpRight',
  
  // Slide out animations
  'slideOutDown',
  'slideOutLeft',
  'slideOutRight',
  'slideOutUp',
  
  // Zoom out animations
  'zoomOut',
  'zoomOutDown',
  'zoomOutLeft',
  'zoomOutRight',
  'zoomOutUp'
];

Usage Examples:

import { 
  generalAnimations, 
  inAnimations, 
  outAnimations 
} from "@quasar/extras/animate/animate-list.common";

// Use in Vue component
export default {
  data() {
    return {
      // Random selection from arrays
      attentionAnimation: generalAnimations[Math.floor(Math.random() * generalAnimations.length)],
      enterAnimation: inAnimations[Math.floor(Math.random() * inAnimations.length)],
      exitAnimation: outAnimations[Math.floor(Math.random() * outAnimations.length)]
    };
  },
  methods: {
    showElement() {
      // Apply entrance animation
      this.$el.classList.add('animate__animated', `animate__${this.enterAnimation}`);
    },
    hideElement() {
      // Apply exit animation
      this.$el.classList.add('animate__animated', `animate__${this.exitAnimation}`);
    },
    drawAttention() {
      // Apply attention animation
      this.$el.classList.add('animate__animated', `animate__${this.attentionAnimation}`);
    }
  }
}

CSS Integration

Animate.css Integration

To use these animations, you need to import Animate.css separately:

/* Import Animate.css (not included in @quasar/extras) */
@import 'animate.css';

/* Or use CDN */
/* <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> */

Basic Usage

/* Basic animation class structure */
.animate__animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

/* Example usage with specific animation */
.animate__fadeIn {
  animation-name: fadeIn;
}

.animate__bounceOut {
  animation-name: bounceOut;
}

HTML Usage

<!-- Apply animations using class names from the arrays -->
<div class="animate__animated animate__fadeIn">
  Element with fade in animation
</div>

<div class="animate__animated animate__bounceOut">
  Element with bounce out animation
</div>

<div class="animate__animated animate__pulse animate__infinite">
  Element with infinite pulsing
</div>

Quasar Integration

Quasar Transitions

// Use with Quasar transition components
<template>
  <transition
    :enter-active-class="`animate__animated animate__${enterAnimation}`"
    :leave-active-class="`animate__animated animate__${exitAnimation}`"
  >
    <div v-if="show" key="content">
      Animated content
    </div>
  </transition>
</template>

<script>
import { inAnimations, outAnimations } from "@quasar/extras/animate/animate-list.common";

export default {
  data() {
    return {
      show: false,
      enterAnimation: inAnimations[8], // "fadeIn"
      exitAnimation: outAnimations[8]  // "fadeOut"
    };
  }
}
</script>

Quasar Dialog Integration

// Use with Quasar dialogs
this.$q.dialog({
  title: 'Animated Dialog',
  message: 'This dialog has animations',
  transitionShow: `animate__animated animate__${inAnimations[0]}`,  // "backInDown"
  transitionHide: `animate__animated animate__${outAnimations[0]}`  // "backOutDown"
});

Quasar Notify Integration

// Use with Quasar notifications
this.$q.notify({
  message: 'Animated notification',
  classes: `animate__animated animate__${inAnimations[5]}`,  // "bounceInDown"
  timeout: 3000
});

Animation Categories

By Animation Type

  • Attention Seekers: generalAnimations - for drawing attention
  • Entrances: inAnimations - for revealing elements
  • Exits: outAnimations - for hiding elements

By Movement Direction

  • Vertical: Up/Down movements (fadeInUp, slideOutDown, etc.)
  • Horizontal: Left/Right movements (fadeInLeft, slideOutRight, etc.)
  • Diagonal: Corner movements (fadeInTopLeft, fadeOutBottomRight, etc.)
  • Rotational: Spinning effects (rotateIn, rotateOut, etc.)
  • Scale: Size-based effects (zoomIn, zoomOut, bounceIn, etc.)

By Visual Style

  • Fade: Opacity-based transitions
  • Slide: Position-based movements
  • Bounce: Elastic, spring-like effects
  • Rotate: 3D rotation effects
  • Flip: 3D flip effects
  • Back: Overshoot and settle effects

Performance Considerations

Animation Duration Control

/* Customize animation timing */
.animate__animated {
  animation-duration: 0.5s; /* Faster animations */
}

.animate__slow {
  animation-duration: 2s;
}

.animate__slower {
  animation-duration: 3s;
}

.animate__fast {
  animation-duration: 800ms;
}

.animate__faster {
  animation-duration: 500ms;
}

Hardware Acceleration

Most Animate.css animations are optimized for hardware acceleration using CSS transforms and opacity changes for smooth performance.

Common Use Cases

  • Page Transitions: Use entrance/exit animations for route changes
  • Modal Dialogs: Animate dialog appearance and disappearance
  • Notifications: Add entrance animations to toast notifications
  • Loading States: Use attention animations for loading indicators
  • Button Feedback: Apply quick attention animations on user interactions
  • Content Reveals: Use entrance animations for progressive content disclosure

Install with Tessl CLI

npx tessl i tessl/npm-quasar--extras

docs

additional-icons.md

animations.md

fontawesome.md

index.md

ionicons.md

material-icons.md

mdi.md

roboto-font.md

tile.json