Where are the Durandal transitions?

Question

Nuget says I already have the Durandal Transitions package installed for the project I'm examining, but ~/Scripts/durandal/transitions contains only the default transition entrance.js

Where are the other transitions? Are there other transitions? Creating a new project in a new solution and adding the Durandal Transitions NuGet package yields the same result (just entrance.js). I can find documentation on how to create a transition but no list of extant transitions.

I really just want left and right hand variations on entrance for use with left and right swipes on mobile devices. I'm pretty sure I can do this myself but I find it hard to believe it hasn't already been done.

---

When using Eric's answer, it is important to read the whole page then follow the link to the fork for a Durandal 2.0 version because there are profound differences.

As an aside, it is possible to produce context sensitive transitions.

define(['durandal/system', 'transitions/helper', 'plugins/router'], 
  function (system, helper, router) {

  return function (context) {
    switch (router.swipe) {
      case "left":
        context.inAnimation = 'slideInRight';
        context.outAnimation = 'slideOutLeft';
        break;
      case "right":
        context.inAnimation = 'slideInLeft';
        context.outAnimation = 'slideOutRight';
        break;
    }
    return helper.create(context);
  };

});

As you may have guessed, this depends on the router having a property swipe which is maintained by event handlers for swipe events prior to initiating navigation to the adjacent page.

Answer 1

Durandal comes prepackaged with the entrance transition. You'll need to do a little bit of work to bring in others (and there are many others).

First, you'll want the transitions helper, which can be found here.

Once you have this file, which you should store under the Scripts folder, in a folder called durandal, you then write transitions that reference it. Here is my fadeIn transition, stored in a file named fadeIn.js (take note of the anatomy of this code):

define(['durandal/system', './transitionHelper'], function(system, helper) {
    var settings = {
            inAnimation: 'fadeIn',
            outAnimation: 'fadeOut'
        },
        fadeIn = function(context) {
            system.extend(context, settings);
            return helper.create(context);
        };

    return fadeIn;
});

Notice that my inAnimation and my outAnimation settings are strings that reference animations stored in the transitions helper file.

Here's another one I write, stored in a file called fadeInVerticalDown.js, referencing completely different animations in the transitions helper:

define(['durandal/system', './transitionHelper'], function(system, helper) {
    var settings = {
            inAnimation: 'fadeInDownBig',
            outAnimation: 'fadeOutUpBig'
        },
        fadeInVerticalDown = function(context) {
            system.extend(context, settings);
            return helper.create(context);
        };

    return fadeInVerticalDown;
});

Take a look at the folder structure below. Notice that the transitionHelper.js file is a sibling of the transitions you write, including of the entrance.js file itself.

UPDATE

Be sure to read the comment below the transitions helper code that references the CSS3 Animation Library and its corresponding animate.css file. You'll need to bring in that file so that the CSS classes added (and removed) by the transitions helper can leverage the animations created for us there.