Defining Transition Animations

Transitions are defined by creating a module like app/transitions/my-transition.js that exports a function. The function must return a Promise that resolves when the transition is done.

The function has access to the current transition context via this. The context includes:

oldElement
The outgoing jQuery-wrapped element for this transition. It may be undefined when transitioning from an empty initial state, and it may become undefined if your transition gets interrupted.
newElement
The incoming jQuery-wrapped element for this transition. It may be undefined when transitioning into an empty state or if your transition gets interrupted.
oldValue, newValue
The corresponding values that go with your old and new states (this is the valued passed into a helper like <LiquidBind />).
oldView, newView
The corresponding Ember View's that go with your old and new states.
older
If a running transition is interrupted before it finishes, you may have more than two active versions in the DOM at once. This is a list of those older versions, newest first. Each entry is an object with with the properties { element, value, view }.
lookup
A function that allows you to lookup other transitions by name. This makes it easier to compose new transitions out of existing transitions. this.lookup('other').apply(this).then(...).

Your transition can receive arguments directly from use statements in transition rules. For example:

/* app/transitions/my-animation.js */
export default function (/* color , opts */) {
  //...
}

/* within app/transitions.js */
this.transition(
  this.toRoute('home'),
  this.use('myAnimation', 'red', { duration: 100 }),
);

Note: if your custom transition is not being found, restart your ember server ...