Question

我有一个SPA，我升级到2，我有一些初步问题，但现在都在工作。但是我注意到切换视图时的良好转换不再有效，并且希望保留它。

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>

正如您所看到的那样，转换是按预期定义的，所有视图都可以工作，加载时会显示动画gif。有什么我错过的吗？如果您需要查看main.js或其他代码，请告诉我。

编辑：尽管有上述设置，但似乎仍然缓存了视图。它几乎与以上设置一样被忽略。

编辑2 根据文档中的升级信息更改为以下内容：

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

一切似乎仍然有效，但仍然没有过渡，我确信仍然可以缓存视图。

Answer 1

您可以尝试编写自己的转换（取决于animate.css，jquery和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

事实证明，当使用Nuget将Durandal更新为2时，它没有使用入口转换正在使用的类更新animate.css文件。添加这些类可以立即解决它。

升级到2后Durandal Entrance Transition无法正常工作

2 个答案: