Q
Version: 1.0.1
Source on Github

Compass Transition

Provides a mixin for CSS3 transitions. See CSS3 Spec: transitions.

This file can be imported using: @import "compass/css3/transition"

Examples

Transition
css3 mixin for css transitions

Imports

  1. Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Configurable Variables help

$graceful-usage-threshold

The the user threshold for transition support. Defaults to $graceful-usage-threshold

all

CSS Transitions Currently only works in Webkit.

  • expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3
  • We'll be prepared.

Including this submodule sets following defaults for the mixins:

$default-transition-property : all
$default-transition-duration : 1s
$default-transition-function : false
$default-transition-delay    : false

Override them if you like. Timing-function and delay are set to false for browser defaults (ease, 0s).

1s

null

null

transform, transform-origin

Functions

view source 

@function is-time($value)
  @return if(type-of($value) == number, not not index(s ms, unit($value)), false)

@function is-time($value) {
  @return if(type-of($value) == number, not not index(s ms, unit($value)), false);
}

Checks if the value given is a unit of time.

view source 

@function prefixed-for-transition($prefix, $property)
  @if not $prefix
    @return $property
  @if type-of($property) == list or type-of($property) == arglist
    $new-list: comma-list()
    @each $v in $property
      $new-list: append($new-list, prefixed-for-transition($prefix, $v))
    @return $new-list
  @else
    @if index($transitionable-prefixed-values, $property)
      @return #{$prefix}-#{$property}
    @else
      @return $property

@function prefixed-for-transition($prefix, $property) {
  @if not $prefix {
    @return $property;
  }
  @if type-of($property) == list or type-of($property) == arglist {
    $new-list: comma-list();
    @each $v in $property {
      $new-list: append($new-list, prefixed-for-transition($prefix, $v));
    }
    @return $new-list;
  }
  @else {
    @if index($transitionable-prefixed-values, $property) {
      @return #{$prefix}-#{$property};
    }
    @else {
      @return $property;
    }
  }
}

Returns $property with the given prefix if it is found in $transitionable-prefixed-values.

view source 

@function transition-map($transition)
  $transition-map: ()
  @each $item in $transition
    @if is-time($item)
      @if map-has-key($transition-map, duration)
        $transition-map: map-merge($transition-map, (delay: $item))
      @else
        $transition-map: map-merge($transition-map, (duration: $item))
    @else if map-has-key($transition-map, property)
      $transition-map: map-merge($transition-map, (timing-function: $item))
    @else
      $transition-map: map-merge($transition-map, (property: $item))
  @return $transition-map

@function transition-map($transition) {
  $transition-map: ();
  @each $item in $transition {
    @if is-time($item) {
      @if map-has-key($transition-map, duration) {
        $transition-map: map-merge($transition-map, (delay: $item));
      }
      @else {
        $transition-map: map-merge($transition-map, (duration: $item));
      }
    }
    @else if map-has-key($transition-map, property) {
      $transition-map: map-merge($transition-map, (timing-function: $item));
    }
    @else {
      $transition-map: map-merge($transition-map, (property: $item));
    }
  }
  @return $transition-map;
}

Returns $transition-map which includes key and values that map to a transition declaration

Mixins

view source 

=transition-property($properties...)
  $properties: set-arglist-default($properties, $default-transition-property)
  +with-each-prefix(css-transitions, $transition-support-threshold)
    $props: if($current-prefix, prefixed-for-transition($current-prefix, $properties), $properties)
    +prefix-prop(transition-property, $props)

@mixin transition-property($properties...) {
  $properties: set-arglist-default($properties, $default-transition-property);
  @include with-each-prefix(css-transitions, $transition-support-threshold) {
    $props: if($current-prefix, prefixed-for-transition($current-prefix, $properties), $properties);
    @include prefix-prop(transition-property, $props);
  }
}

One or more properties to transition

  • for multiple, use a comma-delimited list
  • also accepts "all" or "none"
view source 

=transition-duration($durations...)
  $durations: set-arglist-default($durations, $default-transition-duration)
  +prefixed-properties(css-transitions, $transition-support-threshold, (transition-duration: $durations))

@mixin transition-duration($durations...) {
  $durations: set-arglist-default($durations, $default-transition-duration);
  @include prefixed-properties(css-transitions, $transition-support-threshold, (transition-duration: $durations));
}

One or more durations in seconds

  • for multiple, use a comma-delimited list
  • these durations will affect the properties in the same list position
view source 

=transition-timing-function($functions...)
  $functions: set-arglist-default($functions, $default-transition-function)
  +prefixed-properties(css-transitions, $transition-support-threshold, (transition-timing-function: $functions))

@mixin transition-timing-function($functions...) {
  $functions: set-arglist-default($functions, $default-transition-function);
  @include prefixed-properties(css-transitions, $transition-support-threshold, (transition-timing-function: $functions));
}

One or more timing functions

  • [ ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)]
  • For multiple, use a comma-delimited list
  • These functions will effect the properties in the same list position
view source 

=transition-delay($delays...)
  $delays: set-arglist-default($delays, $default-transition-delay)
  +prefixed-properties(css-transitions, $transition-support-threshold, (transition-delay: $delays))

@mixin transition-delay($delays...) {
  $delays: set-arglist-default($delays, $default-transition-delay);
  @include prefixed-properties(css-transitions, $transition-support-threshold, (transition-delay: $delays));
}

One or more transition-delays in seconds

  • for multiple, use a comma-delimited list
  • these delays will effect the properties in the same list position
view source 

=single-transition($property: $default-transition-property, $duration: $default-transition-duration, $function: $default-transition-function, $delay: $default-transition-delay)
  +transition(compact($property $duration $function $delay))

@mixin single-transition($property: $default-transition-property, $duration: $default-transition-duration, $function: $default-transition-function, $delay: $default-transition-delay) {
  @include transition(compact($property $duration $function $delay));
}

Transition all-in-one shorthand

view source 

=transition($transitions...)
  $default: (compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay),)
  $transitions: if(length($transitions) == 1 and type-of(nth($transitions, 1)) == list and list-separator(nth($transitions, 1)) == comma, nth($transitions, 1), $transitions)
  $transitions: set-arglist-default($transitions, $default)
  +with-each-prefix(css-transitions, $transition-support-threshold)
    $delays: comma-list()
    $transitions-without-delays: comma-list()
    $transitions-with-delays: comma-list()
    $has-delays: false
    // This block can be made considerably simpler at the point in time that
    // we no longer need to deal with the differences in how delays are treated.
    @each $transition in $transitions
      // Declare initial values for transition
      $transition: transition-map($transition)
      $property: map-get($transition, property)
      $duration: map-get($transition, duration)
      $timing-function: map-get($transition, timing-function)
      $delay: map-get($transition, delay)
      // Parse transition string to assign values into correct variables
      $has-delays: $has-delays or $delay
      @if $current-prefix == -webkit
        // Keep a list of delays in case one is specified
        $delays: append($delays, if($delay, $delay, 0s))
        $transitions-without-delays: append($transitions-without-delays, prefixed-for-transition($current-prefix, $property) $duration $timing-function)
      @else
        $transitions-with-delays: append($transitions-with-delays, prefixed-for-transition($current-prefix, $property) $duration $timing-function $delay)
    @if $current-prefix == -webkit
      +prefix-prop(transition, $transitions-without-delays)
      @if $has-delays
        +prefix-prop(transition-delay, $delays)
    @else if $current-prefix
      +prefix-prop(transition, $transitions-with-delays)
    @else
      transition: $transitions-with-delays

@mixin transition($transitions...) {
  $default: (compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay),);
  $transitions: if(length($transitions) == 1 and type-of(nth($transitions, 1)) == list and list-separator(nth($transitions, 1)) == comma, nth($transitions, 1), $transitions);
  $transitions: set-arglist-default($transitions, $default);
  @include with-each-prefix(css-transitions, $transition-support-threshold) {
    $delays: comma-list();
    $transitions-without-delays: comma-list();
    $transitions-with-delays: comma-list();
    $has-delays: false;
    // This block can be made considerably simpler at the point in time that
    // we no longer need to deal with the differences in how delays are treated.
    @each $transition in $transitions {
      // Declare initial values for transition
      $transition: transition-map($transition);
      $property: map-get($transition, property);
      $duration: map-get($transition, duration);
      $timing-function: map-get($transition, timing-function);
      $delay: map-get($transition, delay);
      // Parse transition string to assign values into correct variables
      $has-delays: $has-delays or $delay;
      @if $current-prefix == -webkit {
        // Keep a list of delays in case one is specified
        $delays: append($delays, if($delay, $delay, 0s));
        $transitions-without-delays: append($transitions-without-delays, prefixed-for-transition($current-prefix, $property) $duration $timing-function);
      }
      @else {
        $transitions-with-delays: append($transitions-with-delays, prefixed-for-transition($current-prefix, $property) $duration $timing-function $delay);
      }
    }
    @if $current-prefix == -webkit {
      @include prefix-prop(transition, $transitions-without-delays);
      @if $has-delays {
        @include prefix-prop(transition-delay, $delays);
      }
    }
    @else if $current-prefix {
      @include prefix-prop(transition, $transitions-with-delays);
    }
    @else {
      transition: $transitions-with-delays;
    }
  }
}