ember.js - 我可以让 {{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')
  );
}

在此示例中，对于每个转换，我们都会检查初始路线和目标路线。我们看看它们是否属于左右连续，以及转换是否对应于“左”或“右”。如果它是“左”，我们在“toLeft”的情况下返回真。如果它是“正确的”，我们在“toRight”的情况下返回 true。