上下滑动元素以使用Hammer.js和jQuery删除/删除元素？

Question

我正在尝试向上/向下滑动元素以将其删除。

我正在使用Hammer.js和jQuery。

到目前为止，我可以使用滑动left/right删除元素，效果很好。

但是我需要使用滑动up/down来达到完全相同的目的。

我在这里创建了这个工作示例：

https://codepen.io/anon/pen/YJPPyB

单击按钮，将出现一个元素，然后向左/向右滑动以将其删除。

使用上面的代码，我尝试了以下操作，但未按预期工作：

$toast.animate({ top: event.deltaX, opacity: opacityPercent }, { duration: 50, queue: false, specialEasing: 'easeOutQuad' });

和

              $toast
                  .removeClass('panning')
                  .animate({ bottom: 0, opacity: 1 }, {
                      duration: 300,
                      specialEasing: 'easeOutExpo',
                      queue: false
                  });

有人可以请教这个问题吗？

先谢谢了。

编辑：

当我更改此设置时：

 hammerHandler.on('pan', function (event) {

对此：

hammerHandler.on('pandow', function (event) {

当我下拉菜单时，我可以移动元素，但是我不知道为什么它很不稳定！

这是我现在向下滑动的方式，但是有时冻结了整个页面，我不明白为什么！

 hammerHandler.on('pandown', function (event) {
      // Change toast state
      $toast.addClass('panning');

      var opacityPercent = 1 - Math.abs(event.deltaX / activationDistance);
      if (opacityPercent < 0)
          opacityPercent = 0;



      $toast.animate({ marginBottom: event.deltaX, opacity: opacityPercent }, { duration: 50, queue: false, specialEasing: 'easeOutQuad' });
  });