Durandal轉換在哪裏？

的NuGet說：我已經安裝了，我檢查項目迪朗達爾轉換包，但~/Scripts/durandal/transitions只包含默認的過渡entrance.jsDurandal轉換在哪裏？

如果是其他的轉換？還有其他轉換嗎？在一個新的解決方案中創建一個新項目並添加NuGet包得到相同的結果（只需entrance.js）。我可以找到關於如何創建轉換但沒有現存轉換列表的文檔。

我真的只是想要左右手在入口處的變化，以便在移動設備上左右滑動使用。我很確定我可以自己做這件事，但我很難相信它還沒有完成。

當使用Eric的回答，它讀取整個頁面，然後按照鏈接到叉的Durandal 2.0 version因爲有深刻的分歧是非常重要的。

另外，可以產生上下文敏感的轉換。

define(['durandal/system', 'transitions/helper', 'plugins/router'], 
    function (system, helper, router) { 

    return function (context) { 
    switch (router.swipe) { 
     case "left": 
     context.inAnimation = 'slideInRight'; 
     context.outAnimation = 'slideOutLeft'; 
     break; 
     case "right": 
     context.inAnimation = 'slideInLeft'; 
     context.outAnimation = 'slideOutRight'; 
     break; 
    } 
    return helper.create(context); 
    }; 

});

你可能已經猜到，這取決於具有由用於滑動事件的事件處理程序啓動導航到相鄰的頁之前，保持了特性swipe的路由器上。

來源

2015-02-10 Peter Wone

Durandal預先包裝入口過渡。你需要做一些工作來引進其他人（並且有許多其他人）。

首先，你需要轉換幫手，它可以找到here。

一旦將此文件存儲在腳本文件夾下的文件夾durandal中，您就可以編寫引用它的轉換文件。這裏是我的淡入過渡，存儲在一個文件名爲fadeIn.js（注意這個代碼的解剖）：

define(['durandal/system', './transitionHelper'], function(system, helper) { 
    var settings = { 
      inAnimation: 'fadeIn', 
      outAnimation: 'fadeOut' 
     }, 
     fadeIn = function(context) { 
      system.extend(context, settings); 
      return helper.create(context); 
     }; 

    return fadeIn; 
});

注意，我inAnimation和我outAnimation設置引用存儲動畫字符串在轉換助手文件中。

這裏有另外一個我寫的，存儲在一個名爲fadeInVerticalDown.js，在過渡幫手引用完全不同的動畫：

define(['durandal/system', './transitionHelper'], function(system, helper) { 
    var settings = { 
      inAnimation: 'fadeInDownBig', 
      outAnimation: 'fadeOutUpBig' 
     }, 
     fadeInVerticalDown = function(context) { 
      system.extend(context, settings); 
      return helper.create(context); 
     }; 

    return fadeInVerticalDown; 
});

看看下面的文件夾結構。請注意，transitionHelper.js文件是您編寫的轉換的兄弟，包括文件本身的入口.js文件。

folder structure

UPDATE

請務必閱讀下面引用CSS3動畫庫及其相應animate.css文件的轉換助手代碼的註釋。您需要引入該文件，以便過渡助手可以利用爲我們創建的動畫添加（和移除）CSS類。

來源

2015-02-10 03:12:51

這是一個該死的很好的答案。我會接受它，但是我希望你能通過建議至少有一個好地方找到它們來擴展你的陳述，即有許多轉換。我更期望在一個名爲「Durandal Transitions」的軟件包中至少找到*其中的一些*，它的名字讓我期待不止一個。 – 2015-02-10 03:27:39

@PeterWone你知道嗎，我有同樣的困惑，不知道我手裏握着什麼，可以這麼說。轉換實際上存在於幫手中。您只需編寫一個適配器，將它們用於* in *和* out *中。和我一樣，你可能錯過的是，助手只是利用名爲** animate.css **的文件，你可以在助手的源代碼下面的評論中看到這個文件（我道歉：我忘了提及那）。你需要帶** animate.css **。 – 2015-02-10 03:34:08

並且引入animation.css正是我在寫這些時所做的。這太棒了*！除了CSS之外，它也相當大，但是它很在意，它會很好地放在緩存中。我有一種截然不同的感覺，那就是整個Durandal轉換機制是在CSS3轉換之前進行的，並且有點多餘（在Aurelia中可能不存在或不同形狀）。 – 2015-02-10 03:38:36

由於這不適合我，我會投入我的兩分錢。我做的是，將animate.css複製到我的css文件夾並在我的main index.html文件中引用它後，我將在lib/durandal/js/transitions中找到的entrance.js複製到同一個文件夾中的slideInLeft.js中。然後我換成線66

var entrance = function(context) {

有：

var slideInLeft = function(context) {

然後再以線138

return entrance;

：

return slideInLeft;

我們改變過渡本身。我搜索了入口並將其替換爲slideInLeft。另外搜索大門並將其替換爲slideOutRight。我注意到沒有過渡，問題是我的div沒有動畫類。所以我加了一行98後的線路，從去：

if (animation) { 
    removeAnimationClasses(context.child, fadeOnly);

到：

if (animation) { 
    context.child.classList.add('animated'); 
    removeAnimationClasses(context.child, fadeOnly);

這工作得很好，但我只看到一個過渡（slideOutRight），它的速度非常快;我的意思是在轉換結束之前我已經看到了下一頁。我玩了這個持續時間，並在第14行結束了3000的持續時間：

var fadeOutDuration = 3000;

現在我看到整個轉換，但只有一個。很多登錄到控制檯後，我添加了一行103之後，從去：

if(context.activeView){ 
    removeAnimationClasses(context.activeView, fadeOnly); 
}

到：

if(context.activeView){ 
    removeAnimationClasses(context.activeView, fadeOnly); 
    context.child.classList.add('slideInLeft'); 
}

，就是這樣。我希望這可以幫助別人。

來源

2015-11-13 21:03:43

Durandal轉換在哪裏？

回答

相關問題