durandal - Durandal 过渡在哪里？

Question

Nuget 说我已经为我正在检查的项目安装了 Durandal Transitions 包，但是 ~/Scripts/durandal/transitions仅包含默认过渡 entrance.js
其他过渡在哪里？还有其他过渡吗？在新解决方案中创建一个新项目并添加 Durandal Transitions 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 的路由器。在开始导航到相邻页面之前，它由滑动事件的事件处理程序维护。

Answer 1

Durandal 预装了入口过渡区。你需要做一些工作来吸引其他人(还有很多其他人)。

首先，您需要 转换助手 ，可以找到 here .

一旦你有了这个文件，你应该将它存储在 Scripts 文件夹下，在一个名为 durandal 的文件夹中，然后编写引用它的过渡。这是我的 淡入转换，存储在名为 的文件中淡入淡出.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 settings 是引用存储在转换帮助文件中的动画的字符串。

这是我写的另一个，存储在一个名为 的文件中。 fadeInVerticalDown.js ，在 transitions helper 中引用完全不同的动画:

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 文件是您编写的转换的兄弟，包括 entry.js 文件本身。



更新

请务必阅读引用 的转换帮助程序代码下方的注释。 CSS3 动画库 及其对应的 animate.css 文件。您需要引入该文件，以便过渡助手添加(和删除)的 CSS 类可以利用在那里为我们创建的动画。