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
的路由器。在开始导航到相邻页面之前,它由滑动事件的事件处理程序维护。
最佳答案
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 类可以利用在那里为我们创建的动画。
关于durandal - Durandal 过渡在哪里?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28422679/