jQuery Plugin for Smooth and Performant CSS3 Transitions

jquery.transition.js is an ultra-light jQuery plugin that allows you to apply smooth CSS3 transitions with customizable enter/leave animations to any elements.

Features:

• Smooth fade-in and fade-out transitions: Built-in opacity-based animations with customizable CSS classes.
• Customizable timing and duration: Full control over animation speed and easing functions.
• Chainable jQuery methods: Maintains jQuery's familiar API pattern for easy integration.
• RequestAnimationFrame optimization: Uses browser-native timing for smooth 60fps animations.
• CSS framework compatibility: Works perfectly with Tailwind CSS, Bootstrap, and custom CSS classes.

Use Cases:

• Modal and Dialog Animations: Animate the appearance and disappearance of modal windows. This is a classic use case where a smooth fade-in and scale-up can drastically improve the user experience.
• Dropdown Menus: Add subtle transitions to dropdown menus as they open and close, preventing the jarring effect of elements instantly appearing on the screen.
• Dynamic Content Fading: When loading content via an AJAX call, you can use this plugin to smoothly fade in the new elements once they're added to the DOM.
• Alert and Notification Banners: Slide or fade in notification banners from the edge of the screen and have them gracefully animate out after a delay or on user interaction.

How to use it:

1. For projects using a build process, you can install and import it via npm:

# NPM
$ npm install @tamarak/jquery-transition

# NPM
$ npm install @tamarak/jquery-transition

2. For CDN or direct integration, include the main script after jQuery:

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.transition.js"></script>

3. Initialize the plugin on the element you want to animate.

$('.element-to-animate').transition();

4. Trigger the show/hide animations using the .transitionShow() and .transitionHide() methods.

// Show the element with the 'enter' animation
$('.element-to-animate').transitionShow();

// Hide the element with the 'leave' animation
$('.element-to-animate').transitionHide();

5. You can define your own CSS classes for the start and end states of the animations. This is perfect for integrating with the latest Tailwind CSS framework.

$('.element-to-animate').transition({
  enter: {
    start: 'opacity-0 scale-95', // Starting state
    end: 'opacity-100 scale-100',   // Ending state
    duration: 500,
    timing: 'ease-out'
  },
  leave: {
    start: 'opacity-100 scale-100', // Starting state
    end: 'opacity-0 scale-95',   // Ending state
    duration: 300,
    timing: 'ease-in'
  }
});

When you call .transitionShow(), the plugin will apply the opacity-0 scale-95 classes, and then on the next frame, it will swap them for opacity-100 scale-100, triggering your CSS transition.

6. All default configuration options:

• enter.start: A string of CSS classes applied at the very beginning of the enter animation. This should define the element's initial, hidden state (e.g., 'opacity-0 scale-95').
• enter.end: A string of CSS classes that defines the final, visible state of the element (e.g., 'opacity-100 scale-100'). The plugin swaps the start classes for these to trigger the transition.
• enter.duration: A number representing the animation's duration in milliseconds. 
• enter.timing: A string for the CSS transition-timing-function you want to use, such as 'ease-out', 'linear', or a custom cubic-bezier.
• leave.start: A string of CSS classes that represents the element's initial state before it starts to hide (e.g., 'opacity-100 scale-100').
• leave.end: A string of CSS classes defining the final, hidden state of the element after the animation completes (e.g., 'opacity-0 scale-95').
• leave.duration: A number for the animation's duration in milliseconds. 
• leave.timing: A string for the CSS transition-timing-function to be used during the leave animation.

$('.element-to-animate').transition({
  enter: {
    start: 'opacity-0',
    end: 'opacity-100',
    duration: 300,
    timing: 'ease-out'
  },
  leave: {
    start: 'opacity-100', 
    end: 'opacity-0',
    duration: 300,
    timing: 'ease-in'
  }
});

How It Works:

The plugin maintains a settings registry using element IDs to store configuration data for each animated element. When you call .transition(), it stores the animation parameters and applies initial CSS properties for smooth transitions.

The core animation mechanism uses a two-phase approach. First, it applies the starting CSS classes and forces a reflow by accessing offsetHeight. Then, it uses requestAnimationFrame to defer the class changes to the next frame. This ensures the browser processes the initial state before beginning the transition.

For hide animations, the plugin sets a timeout to change the display property to 'none' after the animation completes. This prevents layout shifts while maintaining accessibility for screen readers.

FAQs:

Q: What happens if I don't provide an element ID?
A: The plugin automatically generates a unique ID for elements without one. This ensures proper tracking of animation settings without requiring manual ID management.

Q: Can I chain multiple transition calls?
A: Yes, the plugin maintains jQuery's chainable API. You can call .transition().transitionShow() or combine it with other jQuery methods in a single chain.

Q: How does performance compare to CSS-only animations?
A: The plugin uses CSS3 transitions internally, so performance is nearly identical to pure CSS animations.

Q: Why does the plugin use CSS classes instead of animating CSS properties directly in JavaScript?
A: This approach separates concerns. Your animation logic (the "what") lives in your CSS, while your trigger logic (the "when") lives in your JavaScript. It's also more performant, as it leverages the browser's native, hardware-accelerated CSS transition engine. Plus, it integrates perfectly with utility-first frameworks like Tailwind CSS.

Q: Can I use this for animations other than fading and scaling?
A: Absolutely. You can use any CSS properties that are transitionable. For example, you could define classes that change transform: translateX() to create a slide-in effect or change background-color for a color fade.

Q: How does this interact with existing CSS transitions on elements?
A: The plugin overwrites transition properties on initialized elements. If you need multiple transitions, configure them through the plugin options.

---

This awesome jQuery plugin is developed by mboisvertdupras. For more Advanced Usages, please check the demo page or visit the official website.