EDIT: Actually this still doesn't work properly for me.

This didn't work for me. I finally got it working using the below. It seems new views have their display style set to 'none' which tripped me up. I noticed the 'entrance' transition sets this to 'block' and then clears it at the end. So that it doesn't interfere with the CSS3 animations I clear it at the beginning.

I also stripped out the JS fallback stuff as I don't need that.

The below isn't perfect and I've altered my duration; you'll probably need to tweak it

define(['durandal/system', 'jquery'], function(system, $) {

  return App = {
    duration: 1000 * .35, // seconds
    create: function(settings) {
      settings = ensureSettings(settings);
      return doTrans(settings);
    }
  };

  function animValue(type) {
    if (Object.prototype.toString.call(type) == '[object String]') {
      return type;
    } else {
      return animationTypes[type];
    }
  }

  function ensureSettings(settings) {
    settings.inAnimation = settings.inAnimation || 'fadeInRight';
    settings.outAnimation = settings.outAnimation || 'fadeOut';
    return settings;
  }

  function doTrans(settings) {
    var parent = settings.parent,
      activeView = settings.activeView,
      newChild = settings.child,
      outAn = animValue(settings.outAnimation),
      inAn = animValue(settings.inAnimation),
      $previousView,
      $newView = $(newChild).removeClass([outAn, inAn]).addClass('animated');

    return system.defer(function(dfd) {
      if (newChild) {

        $newView = $(newChild);
        if (settings.activeView) {
          outTransition(inTransition);
        } else {
          inTransition();
        }
      }

      function outTransition(callback) {
        $previousView = $(activeView);
        $previousView.addClass('animated')
        $previousView.addClass(outAn);
        setTimeout(function() {
          //$previousView.hide();
          //$previousView.removeClass(outAn + ' animated');
          if (callback) {
            callback();
          }
        }, App.duration);
      }

      function inTransition() {
        settings.triggerAttach();
        $newView.css('display', '');
        $newView.addClass(inAn);

        setTimeout(function() {
          $newView.removeClass(inAn + ' ' + outAn + ' animated');
          dfd.resolve(true);
        }, App.duration);
      }

    }).promise();
  }
});

Thanks for the feedback Sheepsteak, I updated with your changes plus a little a little more re-factoring I had done.

This works in Durandal 2.0.1 except when using cacheViews: true, which will make views stick around if you navigate too fast (before the animation's finished, I think).

I still couldn't get it to work either LayzeeDK with cacheViews:true, but I think I have figured it out now: (version 2.0.1), animate taken from http://daneden.me/animate today, and animation settings in animate.css changed to:

.animated {
  -webkit-animation-duration:0.35s;
  animation-duration: 0.35s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

    define(['durandal/system', 'jquery'], function (system, $) {

    return App = {
        duration: 1000 * .35, // seconds
        create: function (settings) {
            settings = ensureSettings(settings);
            return doTrans(settings);
        }
    };

    function animValue(type) {
        if (Object.prototype.toString.call(type) == '[object String]') {
            return type;
        } else {
            return animationTypes[type];
        }
    }

    function ensureSettings(settings) {
        settings.inAnimation = settings.inAnimation || 'fadeInRight';
        settings.outAnimation = settings.outAnimation || 'fadeOut';
        return settings;
    }

    function doTrans(settings) {
        var parent = settings.parent,
          activeView = settings.activeView,
          newChild = settings.child,
          outAn = animValue(settings.outAnimation),
          inAn = animValue(settings.inAnimation),
          $previousView,
          $newView = $(newChild).removeClass(outAn); // just need to remove outAn here, keeping the animated class so we don't get a "flash"

        return system.defer(function (dfd) {
            if (newChild) {

                $newView = $(newChild);
                if (settings.activeView) {
                    outTransition(inTransition);
                } else {
                    inTransition();
                }
            }

            function outTransition(callback) {
                $previousView = $(activeView);
                $previousView.addClass('animated')
                $previousView.addClass(outAn);
                setTimeout(function () {
                    if (callback) {
                        callback();
                    }
                }, App.duration);
            }

            function inTransition() {
                if ($previousView) {
                    $previousView.css('display', 'none');
                }
                settings.triggerAttach();

                $newView.addClass('animated');  //moved the adding of the animated class here so it keeps it together
                $newView.addClass(inAn);
                $newView.css('display', '');

                setTimeout(function () {
                    $newView.removeClass(inAn + ' animated'); // just need to remove inAn here, that's all we'll have
                    dfd.resolve(true);
                }, App.duration);
            }

        }).promise();
    }
});

Thanks very much for the transition helper evanlarsen and jstott, it's great!!

@jiggle - Thanks for this, works great! Thanks all for the samples here.

How do I apply a transition to a particular element rather than the whole document ?

This is great thanks!!!