2014-12-03 76 views
1

我有一個SPA,我升級到2,我有一些初始問題,但現在都在工作。但是我注意到,切換視圖時的良好轉換不再有效,並且希望保留它。Durandal入口轉換升級到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或其他代碼。

編輯: 它似乎也是這樣的情況,視圖仍然緩存,儘管上面的設置。這幾乎就像上面的設置被忽略了一樣。

EDIT 2 改爲低於按升級信息的文檔:

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

一切似乎仍然在工作,但仍然沒有轉變,我敢肯定意見仍緩存。

+0

我建議看一看entrance.js,看看它是否按預期工作。當我升級到2.0時,我遇到了一些問題。 – Dziamid 2014-12-04 13:15:37

+0

相當多的代碼需要通過,你有什麼想法你有問題嗎? – user1166905 2014-12-04 13:23:55

+0

不記得了,無論如何,我切換到animate.css動畫,並編寫了自己的模塊來整合animate.css – Dziamid 2014-12-05 17:09:57

回答

0

事實證明,使用時的NuGet更新迪朗達爾到二沒更新animate.css文件與入口轉換使用的類。添加這些類直接解決了它。

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

}); 
相關問題