从 $swipe 动作开始时，AngularJS $animate addClass 不起作用答案

【问题标题】：AngularJS $animate addClass not working when started from $swipe action从 $swipe 动作开始时，AngularJS $animate addClass 不起作用
【发布时间】：2014-12-29 20:09:22
【问题描述】：

我用 AngularJS 和 jQuery 创建了一个动画滑块。通过单击我包含的两个按钮（左和右）之一运行滑动动画。当我尝试通过 $swipe 动作触发动画时，动画不起作用。

在滑动场景中，$animate.addClass() 没有添加应该触发动画的类。

你可以在这里试试：http://plnkr.co/edit/oUVzHoR8kFHB3ZZAzPpQ?p=preview

首先单击按钮，您将看到幻灯片动画。然后用鼠标拖动幻灯片。在浏览器控制台中，您将看到“移动它！”这是在动画开始之前打印出来的，但是……什么也没发生。你知道为什么吗？

顺便添加 ng-swipe-left / -right 属性。但我想要自定义滑动行为。

下面是代码供参考：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <title>Test</title>

    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular-touch.js"></script>

    <script type="text/javascript">

        var app = angular.module('myApp', ['ngAnimate', 'ngTouch']);

        app.directive('sliderbox', ['$animate', '$swipe', '$log', function ($animate, $swipe, $log) {
            return {
                restrict: 'E',
                replace: false,
                link: function (scope, element, attrs) {

                    scope.moveLeft = function () {
                        move('move-left')
                    };

                    scope.moveRight = function () {
                        move('move-right')
                    };

                    function move(directionClass) {

                        $log.info("Starting moving " + directionClass);

                        if (directionClass != null) {
                            // Find child elements with the boxslide class
                            var slides = element.find('.boxslide');
                            // Get the left-most slide
                            var leftMostSlide = slides[0];

                            if ((!$(leftMostSlide).is(':animated'))) {
                                $log.info("Move it!");
                                $animate.addClass(leftMostSlide, directionClass).then(function () {
                                    $(leftMostSlide).removeClass(directionClass);
                                });
                            }
                        }
                    }

                    var posX;
                    var posY;

                    $swipe.bind(element, {

                        'start': function (coords) {
                            posX = coords.x;
                            posY = coords.y;
                        },
                        'move': function (coords) {

                        },
                        'end': function (coords) {
                            var delta = coords.x - posX;
                            if (delta > 50) {
                                $log.info("Hit move right threshold");
                                scope.moveRight();
                            } else if (delta < -50) {
                                $log.info("Hit move left threshold");
                                scope.moveLeft();

                            }
                        },
                        'cancel': function (coords) {
                            // ..
                        }
                    });
                }
            };


        }]);

        app.animation('.boxslide', ['$log', function ($log) {
            return {
                addClass: function (element, className, done) {

                    var movePixels = 130; // (78px + 2 * 25px padding + 2 * 1px border)
                    var direction = '';

                    if (className === 'move-left') {
                        direction = '-=';
                    } else if (className == 'move-right') {
                        direction = '+=';
                    }

                    $log.info("MOVING: " + className);

                    element.animate({marginLeft: direction + movePixels}, 500, done);

                }
            }
        }]);

    </script>

    <style>
        sliderbox {
            display: block;
            border: 1px solid blue;
            overflow: hidden;
            white-space: nowrap;
        }

        .boxslide {
            border: 1px solid gray;
            background-color: #ececec;
            padding: 25px;
            width: 78px;
            display: inline-block;
            float: none;
            vertical-align: top;
            margin: 0;
        }
    </style>


</head>
<body>
<sliderbox>
    <div class="boxslide">
        <div>
            Slide 1
        </div>
    </div>
    <!--
                This comment prevents white space between box slides
                -->
    <div class="boxslide">
        Slide 2
    </div>
    <!--
                This comment prevents white space between box slides
                -->
    <div class="boxslide">
        Slide 3
    </div>
</sliderbox>

<button ng-click="moveLeft()">Left</button>
<button ng-click="moveRight()">Right</button>


</body>
</html>

【问题讨论】：

奇怪，它确实有效，但视图没有更新
您的 addClass 永远不会为幻灯片上的元素触发

标签： jquery angularjs jquery-animate swipe

【解决方案1】：

啊。当然，这是一个范围的事情。当我使用 $scope.$apply 时，它可以工作。仍在尝试围绕 Angular 的作用域和异步事件展开思考，但下面更新的“end:”函数现在可以使用。

更新的插件：http://plnkr.co/edit/H3JykOMteGPOHhGcu9fw?p=preview

'end': function (coords) {
    var delta = coords.x - posX;
    if (delta > 50) {
        $log.info("Hit move right threshold");
        scope.$apply(function(){
            scope.moveRight();
        });
    } else if (delta < -50) {
        $log.info("Hit move left threshold");
        scope.$apply(function(){
            scope.moveLeft();
        });
    }
},

【讨论】：