Durandal Entrance Transition not working after upgrade to 2

Question

I have a SPA that I upgraded to 2 which I had some initial issues with but all working now. However I have noticed that the nice transition when switching views no longer works and would like to retain it.

Shell.html:

<div class="loader" data-bind="css: { active: router.isNavigating }">
<img src="/scale/images/379.gif" />
</div>
<div id="pageHost" class="page-host">
<!--ko compose: {
     model: router.activeItem,
     compositionComplete: router.compositionComplete,
     attached: router.attached,
     cacheViews:false,
     transition: 'entrance'} -->
<!--/ko-->
</div>

As you can see the transition is defined as expected and all the views work and the animated gif displays when loading. Is there anything I've missed? Let me know if you need to see main.js or other code.

EDIT: It also appears to be the case that views are still cached despite the setting above. It's almost like the above settings are ignored.

EDIT 2 Changed to below as per upgrade info in docs:

<div id="pageHost" class="page-host" data-bind="css: { active: router.isNavigating }">
<!--ko router: { transition:'entrance', cacheViews:false }--><!--/ko-->
</div>

Everything still seems to be working but still no transitions and I'm sure views are still cached.

I'd suggest to have a look at entrance.js and see it it works as expected. When I upgraded to 2.0 I had some issues there. — Dziamid, Dec 04 '14 at 13:15
Quite alot of code to go through, do you have any idea where you had the issue? — user1166905, Dec 04 '14 at 13:23
Don't remember, anyway I switched to animate.css animations and wrote my own module to encorporate animate.css — Dziamid, Dec 05 '14 at 17:09

score 1 · Answer 1 · answered Dec 05 '14 at 17:12

You can try writing your own transition like this one (depends on animate.css, jquery and Q)

define(function(require) {

    var
        $ = require('jquery'), 
        Q = require('q');

    $.fn.animationDuration = function (sec) {
        $(this).css({
            '-webkit-animation-duration': sec + 's',
            '-moz-animation-duration': sec + 's',
            '-ms-animation-duration': sec + 's',
            'animation-duration': sec + 's'
        });

        return this;
    };

    return function (context) {
        console.log('transitioning views', context);

        var afterAnimateActiveView = function (view) {
                view && $(view).hide();
            },
            duration = context.duration || {},
            durationIn = duration.in || 0.5,
            durationOut = duration.out || 0.5;

        return animateView(context.activeView, durationOut, 'fadeOut', afterAnimateActiveView)
            .then(function (activeView) {
                //hide active view after animation to prevent flickering
                activeView && $(activeView).hide();

                return animateView(context.child, durationIn, 'fadeIn');
            })
            .then(function () {
                console.log('transition complete');
            });
    };

    function animateView(view, duration, animation, cb) {
        var dfd = Q.defer();

        if (view) {
            console.log('transitioning view', view);

            $(view)
                .animationDuration(duration)
                .addClass('animated')
                .addClass(animation)
                .show()
                .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                    $(view)
                        .removeClass('animated')
                        .removeClass(animation);
                    //need to use callback here to do syncronous manipulations
                    cb && cb(view);

                    dfd.resolve();
                });
        } else {
            dfd.resolve(true);
        }

        return dfd.promise;
    }

});

score 0 · Accepted Answer · answered Dec 07 '14 at 13:51

0

It turns out that when used Nuget to update Durandal to 2 it didn't update the animate.css file with the classes the entrance transition was using. Adding these classes resolved it straight away.

answered Dec 07 '14 at 13:51

user1166905

2,612
7
43
75

Durandal Entrance Transition not working after upgrade to 2

2 Answers2