Question

我对ng-animate感到沮丧。我花了两天时间阅读它，我仍然不明白它是如何工作的。这就是我正在做的事情。

我有一个可以用鼠标拖动的元素。当元素达到特定阈值（130px左或右）时，我想重置并将其动画回原来的位置（0）。

我的元素没有进入或离开Dom;即使它正在移动＆＃34;它没有改变它在DOM中的位置，所以它并不是真的＆＃34; ng-move ＆＃34; ing。

更新

根据大众的要求，这里有一些代码

app.directive('ngSwipeMessage', function ($touch, $animate) {

        const leftThreshold = -130;
        const rightThreshold = 130;

        return {
            restrict: 'A',
            link: function ($scope, element, attr, controller) {

                var handler = $touch.bind(element, {
                    start: function (touch, ev) {
                        console.log("start");
                    },
                    end: function (touch, ev) {
                        console.log("end");
                        // if they stop moving, then reset
                        //$animate.addClass(element, "ng-move ng-move-active");
                    },
                    move: function (touch, ev) {
                        console.log("move");

                        element.css({
                            left: touch.distanceX
                        });

                        if (touch.distanceX < leftThreshold || touch.distanceX > rightThreshold) {
                            // fire our handler action and reset the element position
                            //$animate.addClass(element, "ng-move ng-move-active");
                        }
                    }
                });

                $scope.$on('$destroy', function () {
                    console.log("destroying");
                    handler();
                });
            }
        };
    });

这是CSS

#list-messages .message.ng-move {
  -webkit-transition: 0.2s linear all;
  -moz-transition: 0.2s linear all;
  -o-transition: 0.2s linear all;
  transition: 0.2s linear all;
  /* future proof */
}
#list-messages .message.ng-move.ng-move-active {
  left: 0 !important;
}

所以我尝试使用的东西是$ animate.leave / enter / move但它们似乎实际上想要离开，进入或移动DOM。我已经开始尝试使用addClass / removeClass，这显示了一些承诺。总的来说，创建自定义动画（在我看来）并没有很好地记录下来。

感谢任何帮助。感谢。

你如何使用AngularJs制作动画？

0 个答案: