我可以获取{{link-to}}来指定使用ember fire的动画吗？

Question

我在页面上有左/右箭头，我想选择动画而不必定义所有路线之间的关系。是否可以在{{link-to}}上设置它？现在它非常脆弱。

Answer 1

我一直在寻找，而且我不认为可以知道从它引起的转换中点击了什么链接。但是，我可以想出两种不同的方法来解决您的用例。

解决方案1：元编程

列出您的路线并从中动态生成过渡。像这样：

// 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之间的转换，则需要更改算法以定义新的组合。

解决方案2：回调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。情况下。