Durandal 转换在哪里？

Question

Nuget 说我已经为我正在检查的项目安装了 Durandal Transitions 包，但是 ~/Scripts/durandal/transitions 仅包含默认转换 entrance.js

其他转换在哪里？还有其他转换吗？在新解决方案中创建新项目并添加 Durandal Transitions NuGet 包会产生相同的结果（只是 entrance.js）。我可以找到有关如何创建转换的文档，但没有现有转换的列表。

我真的只是想要左右手变化的入口，以便在移动设备上左右滑动使用。我很确定我自己可以做到这一点，但我很难相信它还没有完成。

当使用 Eric 的答案时，重要的是阅读整个页面，然后跟随 link 到分叉以获得 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 的路由器，该路由器在启动导航到相邻页面之前由事件处理程序维护滑动事件。

Answer 1

Durandal 预打包了 entrance 转换。您需要做一些工作才能引入其他人（还有许多其他人）。

首先，您需要 transitions helper，可以在 here.

中找到它

获得此文件后，您应将其存储在名为 durandal 的文件夹中的 Scripts 文件夹下，然后编写引用它的转换。这是我的 fadeIn 过渡，存储在名为 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 文件是您编写的转换的同级文件，包括 entrance.js 文件本身。

更新

请务必阅读引用 CSS3 动画库 及其对应的 animate.css[ 的转换辅助代码下方的注释=48=] 文件。您需要引入该文件，以便转换助手添加（和删除）的 CSS 类可以利用为我们创建的动画。

Answer 2

由于这对我不起作用，我将投入两分钱。我所做的是，在将 animate.css 复制到我的 css 文件夹并在我的主 index.html 文件中引用它之后，我将 lib/durandal/js/transitions 中的 entrance.js 复制到 slideInLeft.js 在同一文件夹中。然后我替换了第66行

var entrance = function(context) {

与：

var slideInLeft = function(context) {

然后是第 138 行

return entrance;

与：

return slideInLeft;

现在要更改过渡本身。我搜索了 entrance-in 并将其替换为 slideInLeft。再次搜索 entrance-out 并将其替换为 slideOutRight。我注意到没有过渡，问题是我的 div 没有 animated class。所以我在第 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');
}

就是这样。我希望这对某人有所帮助。

Durandal 转换在哪里？

Where are the Durandal transitions?

durandal

transitions