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);
        }
    };
});

This gist is for this css3 animation library. But allows for javascript fallbacks if you so choose to add some but they are not required. If you are using Modernizr then it will automatically use that but if you wish to use another library other than Modernizr to detect the browser for CSS3 compatibility then just overwrite the isNotCss3Compliant function.

Place this transitionHelper.js file (above) inside the durandal/transitions folder. Also, create another file in that transitions folder called slideInRight.js with this code in it:

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

    var settings = {
        inAnimation: 'fadeInLeftBig',
        outAnimation: 'fadeOutRightBig',
        jsOutFallback: function ($previousView, duration) {
            $previousView.animate({ left: '101%' }, duration);
        },
        jsInFallback: function ($newView, duration) {
            $newView.css({ left: '-101%' });
            $newView.animate({ left: '0' }, duration);
        }
    };

    return helper.create(settings);
});

How to use this is by referencing this slideInRight file from w/in your durandal compose binding.

<div data-bind="compose: { model: vm, transition: 'slideInRight' }"></div>

Just follow that pattern above in the slideInRight.js file for any other animations you wish to use. Also if you wish to use a random animation you can set inAnimation and outAnimation to a number, [0,54], and it will use one of the animations.

Is the comment at the top that I have to modify the duration to in animate.css to 0.3s correct? It appears you are doing that programatically already. I made the change and it looks the same with or without it. Thanks.

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 ?