HammerJS pan事件的角度动画或CSS动画

Question

我的Angular应用程序中有一个材质列表元素（一个div），我希望能够进行滑动触摸操作。我已将HammerJS包含在我的应用程序中，并且pan和swipe操作在功能上正常工作。我要实现的是一种动画，当用户“释放”正在滑动/平移的div时。我希望它在滑动前缓慢滑回其原始位置。想想Gmail或其他可在其中滑动元素的应用程序。当开始滑动但放弃滑动时，我希望该项目优雅地（即：缓慢地）返回到其相对于视口左侧的原始位置。

在我的代码中，我将CSS left属性设置为HammerJS pan的deltaX值。这一切都很好。它对触摸手势反应灵敏且准确。平移完成后，我将left CSS值设置为0，以“重置”正在滑动的div。当前平移完成时，div 混蛋位于左侧。它最终出现在我想要的位置，但是我希望通过动画使过渡平滑。

这是我的函数，用于处理HammerJS中的pan事件。

onPan($event) {
        if ($event.isFinal) {
            this._leftPan = 0;
        } else {
            this._leftPan = $event.deltaX;
        }
}

在函数this._leftPan中设置目标left的CSS div属性。

我可以通过CSS为left属性设置动画，但是这也将为pan的开头设置动画，并且不能反映用户触摸的真实效果。

如何使div的返回动画到左侧？