Transitions

transition.js is the smallest, quietest plugin in the whole Bootstrap 3 JS suite — and the only one you will never call directly. It's a tiny internal helper that detects browser CSS3 transition support and standardizes the "transition end" event across browsers. Modal, Tab, Alert, and Carousel all lean on it internally to know when a fade, slide, or collapse animation has actually finished. There is no markup to write for it and no jQuery method to invoke — it just needs to be present. This lesson is about making sure it's loaded correctly, not about building anything with it.

Invisible Infrastructure, Not a Component

Unlike Modal or Tab, transition.js has no data-* attributes and no public jQuery method. You will never write $('#thing').transition() in your own code. Its only job is to sit underneath the other plugins so that they can animate reliably. Think of it as plumbing: you never touch it, but everything upstream breaks without it.

Required Script Order: jQuery, Then bootstrap.min.js

In Bootstrap 3, every JS plugin — including transitions — is bundled into one file, bootstrap.min.js. There's no separate transition.js tag to add; it's baked in. The only rule that matters is load order: jQuery has to be on the page before bootstrap.min.js, because every Bootstrap 3 plugin is written as a jQuery plugin and registers itself onto jQuery.fn at load time.

<!-- Correct order: jQuery first, then the Bootstrap 3 bundle -->
<script src="/* jQuery CDN link goes here */"></script>
<script src="/* bootstrap.min.js CDN link goes here */"></script>

(This page's own <head> loads both in exactly that order — view its source to see the real CDN URLs in place.)

Worked Example: Confirming Transitions Are Active

Since there's no markup unique to transition.js, the "worked example" is just proving the fade actually happens. Here's a TrailMap alert that fades out over roughly 150ms when dismissed — that fade is transition.js at work underneath the Alert plugin you'll meet in a later lesson:

<!-- TrailMap: a fading alert, proof that transitions are wired up -->
<div class="alert alert-success fade in" role="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  Trail "Ridge Overlook Loop" was added to your favorites.
</div>

Click the close button in a live page and you'll see the alert fade rather than vanish instantly — that smooth disappearance is .fade plus transition.js, not a CSS animation you wrote yourself. If bootstrap.min.js were missing or loaded before jQuery, the alert would simply disappear with no fade at all, and every other plugin on the page would throw a console error the moment you tried to use it.