Durandal transition helper file. This imposes that you are using https://github.com/daneden/animate.css Also, that you have changed the animation duration in animate.css from 1s to .3s

transitionHelper.js

define(function(require) {
    var system = require('../system');

    var animationTypes = [
        'bounce',
        'bounceIn',
        'bounceInDown',
        'bounceInLeft',
        'bounceInRight',
        'bounceInUp',
        'bounceOut',
        'bounceOutDown',
        'bounceOutLeft',
        'bounceOutRight',
        'bounceOutUp',
        'fadeIn',
        'fadeInDown',
        'fadeInDownBig',
        'fadeInLeft',
        'fadeInLeftBig',
        'fadeInRight',
        'fadeInRightBight',
        'fadeInUp',
        'fadeInUpBig',
        'fadeOut',
        'fadeOutDown',
        'fadeOutDownBig',
        'fadeOutLeft',
        'fadeOutLeftBig',
        'fadeOutRight',
        'fadeOutRightBig',
        'fadeOutUp',
        'fadeOutUpBig',
        'flash',
        'flip',
        'flipInX',
        'flipInY',
        'flipOutX',
        'flipOutY',
        'hinge',
        'lightSpeedIn',
        'lightSpeedOut',
        'pulse',
        'rollIn',
        'rollOut',
        'rotateIn',
        'rotateInDownLeft',
        'rotateInDownRight',
        'rotateInUpLeft',
        'rotateInUpRight',
        'rotateOut',
        'rotateOutDownLeft',
        'rotateOutDownRight',
        'rotateOutUpLeft',
        'roateOutUpRight',
        'shake',
        'swing',
        'tada',
        'wiggle',
        'wobble'
    ];

    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(parent, newChild, settings) {
        var outAn = animValue(this.outAnimation),
            inAn = animValue(this.inAnimation),
            $newView = $(newChild).removeClass([outAn, inAn]).addClass('animated');

        return system.defer(function (dfd) {
            function endTransition() {
                dfd.resolve();
            }

            if (!newChild) {
                if (settings.activeView) {
                    $(settings.activeView).addClass(outAn);
                    setTimeout(function () {
                        if (!settings.cacheViews) {
                            ko.virtualElements.emptyNode(parent);
                        }
                        endTransition();
                    }, App.duration);
                } else {
                    if (!settings.cacheViews) {
                        ko.virtualElements.emptyNode(parent);
                    }
                    endTransition();
                }
            } else {
                var $previousView = $(settings.activeView);
                if ($previousView.length) {
                    $previousView.addClass('animated');
                    // slide out old content
                    $previousView.addClass(outAn);

                    if (this.jsOutFallback && App.isNotCss3Compliant()) {
                        $previousView.stop();
                        this.jsOutFallback($previousView, App.duration);
                    }

                    setTimeout(beginEntraceTransition, App.duration);
                } else { beginEntraceTransition(); }
            }

            function beginEntraceTransition() {
                if (settings.cacheViews) {
                    if (settings.composingNewView) {
                        ko.virtualElements.prepend(parent, newChild);
                    }
                } else {
                    ko.virtualElements.emptyNode(parent);
                    ko.virtualElements.prepend(parent, newChild);
                }
                
                $newView.addClass(inAn);

                if (this.jsInFallback && App.isNotCss3Compliant()) {
                    $newView.stop();
                    this.jsInFallback($newView, App.duration);
                }

                setTimeout(endTransition, App.duration);
            }
        }).promise();
    }

    return App = {
        duration: 1000 * .3, // seconds
        isNotCss3Compliant: function () {
            return !!(Modernizr && !Modernizr.csstransitions && !Modernizr.csstransforms);
        },
        create: function (settings) {
            settings = ensureSettings(settings);
            return $.proxy(doTrans, settings);
        }
    };
});

Yes, its required. The CSS animations are probably not finishing before the views are swapped.

Hello, I just integrated the transitionHelper into my app, changed transition: 'slideInRight' and it works going forward. But going backwards in history causes a blank page, and a broken history. What could be wrong? I changed the animation to .3 seconds in .animated. would be cool to get in working. thank you

It might be because of the css of the surrounding container etc. But I use the same css from the samples and boostrap and if I load the sample page the transitions are not working backwards eigther. Does it work with bootstrap? Do I need responsive design?

Is this compatible with Durandal 2?

I forked this gist for Durandaljs v2.0. The paint is still a little wet - but my initial tests were fine. I'm in the process of migrating from 1.x to 2.0, and these transitions were so nice I needed to nudge them forward! Will update (forked) gist when I run through a few more samples and clean up/re-factor a little more...

can i use this on durandal 1.x ?