1. Home
  2. Namespaces
  3. FooGallery.utils.transition

transition

Contains common utility methods and members for the CSS transition property.

Details

core/js/foogallery.js, line 1977

Members

<static> supported :boolean

Whether or not transitions are supported by the current browser.

Details
boolean

core/js/foogallery.js, line 1987

<static> end :string

The transitionend event name for the current browser.

Description

Depending on the browser this returns one of the following values:

  • "transitionend"
  • "webkitTransitionEnd"
  • "msTransitionEnd"
  • "oTransitionEnd"
  • null - If the browser doesn't support transitions
Details
string

core/js/foogallery.js, line 2010

Methods

<static> duration( $element [, def ] ) → {number}

Gets the transition-duration value for the supplied jQuery element.

Parameters
Name Type Attributes Default Description
$element jQuery

The jQuery element to retrieve the duration from.
def number <optional>
 0

The default value to return if no duration is set.
Returns

The value of the transition-duration property converted to a millisecond value.

Details

core/js/foogallery.js, line 2043

<static> start( $element, className [, state [, timeout ] ] ) → {jQuery.Deferred}

Start a transition by toggling the supplied className on the $element.

Description

This method lets us use CSS transitions by toggling a class and using the transitionend event to perform additional actions once the transition has completed across all browsers. In browsers that do not support transitions this method would behave the same as if just calling jQuery's .toggleClass method.

The last parameter timeout is used to create a timer that behaves as a safety net in case the transitionend event is never raised and ensures the deferred returned by this method is resolved or rejected within a specified time.

Parameters
Name Type Attributes Description
$element jQuery

The jQuery element to start the transition on.
className string

One or more class names (separated by spaces) to be toggled that starts the transition.
state boolean <optional>

A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.
timeout number <optional>

The maximum time, in milliseconds, to wait for the transitionend event to be raised. If not provided this will be automatically set to the elements transition-duration property plus an extra 50 milliseconds.
Returns
Details

core/js/foogallery.js, line 2070

transition-duration - CSS | MDN for more information on the `transition-duration` CSS property.