Use: jQ 2.0.3 jQ 1.9.0b1 jQ 1.8 jQ 1.7 jQ 1.6 jQ 1.5

jQuery transit tests

jQuery: v1.9.0b1
Transit: v0.9.12

Since there's no reliable programmatic way to test for transitions, this is a simple page set up so you can visually inspect effects conveniently.

Transformations

Translation

$box.transition({ x: 20, y: 20 });

Rotate

$box.transition({ rotate: 45 });

Rotate via string

$box.transition({ rotate: '45deg' });

Skew X

$box.transition({ skewX: 30 });

Skew Y

$box.transition({ skewY: 30 });

Skew XY

$box.transition({ skewY: 30, skewX: 30 });

Scale up

$box.transition({ scale: 2 });

Scale down

$box.transition({ scale: 0.5 });

3D transformations

Rotate X

$box.transition({
    perspective: '500px',
    rotateX: 180
  });

Rotate Y

$box.transition({
    perspective: '500px',
    rotateY: 180
  });

Rotate X/Y

$box.transition({
    perspective: '500px',
    rotateX: 180,
    rotateY: 180
  });

Params

Delay

$box.transition({ rotate: 45, delay: 150 });

Delay zero

$box
    .transition({ x: 50, delay: 0 })
    .transition({ x: 0 });

Ease should be snappy

$box.transition(
    { x: 100 }, 500,
    'cubic-bezier(0,0.9,0.3,1)');

Chaining

Queueing

$box
  .transition({ x: 50 })
  .transition({ x: 0 })
  .transition({ y: 50 })
  .transition({ y: 0 });

Duration 0 should not flicker

$box
  .transition({ x: 50 }, 0)
  .transition({ x: 0 }, 0)
  .transition({ y: 50 }, 0);

Callbacks

2nd param

$box.transition(
    { rotate: 45 },
    function() { $box.html('OK'); });

3rd param

$box.transition(
    { rotate: 45 },
    500,
    function() { $box.html('OK'); });

as "complete"

$box.transition({
    rotate: 45,
    complete: function() { $box.html('OK'); }
  });

Misc

CSS with Transition

$box
    .css({ x: -50 })
    .transition({ x: 50 });

Opacity

$box
    .transition({ opacity: 0 });

Transition of transform no jump first time

$box
    .transition({ transform: "translateX(80px)" });