Durandal Entrance Transition not working after upgrade to 2 - durandal-2.0

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.

Answer 1

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

Answer 2

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.