如何以交互方式设置angularjs路由转换的动画效果？

Question

我知道如何在路由之间设置动画，但是如何使这些动画具有“交互性”？例如，我希望动画直接映射到用户的拖动手势，而不是简单地在滑动时触发预设的幻灯片动画。这种类型的交互的另一个副作用是，用户应该能够开始转换，但随后使用相同的手势取消它。

这种模式似乎对构建Google的Material Design中看到的那种动画过渡很重要。我可以在路由内完成这些转换，但出于组织原因，我希望能够在路由之间完成这些转换。

任何设计的例子或描述都将非常感谢。

Answer 1

我会这样做：

touchstart检测

1. 事件，并在移动时触发behaviour
2. detect手指位置，并相应地移动您的包装器html元素。可能使用css，如transform3d: translateX( ... )
3. on touchend，评估距离是否足以触发路线更改
4. 如果不足以，则使用css过渡动画恢复到原始位置。

你可能想看看手势检测的http://hammerjs.github.io/。

祝你好运！