我在页面上有左/右箭头,我想选择动画而不必定义所有路线之间的关系。是否可以在{{link-to}}
上设置它?现在它非常脆弱。
答案 0 :(得分:0)
我一直在寻找,而且我不认为可以知道从它引起的转换中点击了什么链接。但是,我可以想出两种不同的方法来解决您的用例。
列出您的路线并从中动态生成过渡。像这样:
// app/transitions.js
export default function() {
const orderedRoutes = [
'left-route',
'center-route',
'right-route',
];
// See https://github.com/coleww/each-cons
// where I pinched this from
function eachCons(a, n) {
var r = []
for (var i = 0; i < a.length - n + 1; i++) {
r.push(range(a, i, n))
}
return r
}
function range (a, i, n) {
var r = []
for (var j = 0; j < n; j++) {
r.push(a[i + j])
}
return r
}
eachCons(orderedRoutes, 2).forEach(pair => {
// `pair` will be each pair of consecutive routes
// on our `orderedRoutes` list
const left = pair[0];
const right = pair[1];
// For each pair, define a transition
this.transition(
this.fromRoute(left),
this.toRoute(right),
this.use('toLeft'),
this.reverse('toRight')
);
});
}
请注意,我只定义相邻路线的过渡。如果您想定义left-route
和center-route
之间的转换,则需要更改算法以定义新的组合。
fromRoute
函数fromRoute
不仅可以使用字符串,还可以使用函数。此函数接收两个参数:转换的初始路径和最终路径的名称。如果要应用转换,则可以在此函数中返回true
,否则返回false
。见这里:
http://ember-animation.github.io/liquid-fire/#/transition-map/route-constraints
您可以使用此功能来决定是向左还是向右(根据您的使用情况)。见:
// app/transitions.js
export default function() {
// Names of the routes in the left-right succession
const orderedRoutes = [
'left-route',
'center-route',
'right-route',
];
function isLeft(initial, destination) {
const i0 = orderedRoutes.indexOf(initial);
const i1 = orderedRoutes.indexOf(destination);
if (i0 === -1 || i1 === -1) {
// This is not one of the transitions
// in the left-right succession
return false;
}
if (i0 === i1) {
// They are the same route
return false;
}
// This will be `true` if the initial route
// is "to the left" of the destination route
return i0 < i1;
}
this.transition(
this.fromRoute(isLeft),
this.use('toLeft')
this.reverse('toRight')
);
}
在此示例中,对于每个转换,我们检查初始和目标路由。我们看看它们是否属于左右连续,以及过渡是否对应于&#34; left&#34;或者&#34;权利&#34;。如果它是&#34;左边&#34;我们在&#34; toLeft&#34;中返回true案件。如果它是&#34;对&#34;,我们在&#34; toRight&#34;中返回true。情况下。