Question

我是AngularJS的新手，目前我正在尝试使用AngularJS动画。

我写了一个CSS动画类，当徽章上的值发生变化时，我想在“消息”按钮上应用Twitter Bootstrap徽章。

未读消息计数由“MessagesCtrl”控制器处理。

现在，点击按钮时计数会发生变化（“添加消息”）。

这是我到目前为止的完整应用程序：

<!DOCTYPE html>
<html ng-app="ExampleApp">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-animate.min.js></script>
    <style rel="stylesheet">
        @-webkit-keyframes shake {
            0% { -webkit-transform: translate(2px, 2px) rotate(20deg); }
            20% { -webkit-transform: translate(-4px, -4px) rotate(-20deg); }
            40% { -webkit-transform: translate(2px, 2px) rotate(20deg); }
            60% { -webkit-transform: translate(-2px, 2px) rotate(-20deg); }
            80% { -webkit-transform: translate(4px, -4px) rotate(20deg); }
            100% { -webkit-transform: translate(-2px, 2px) rotate(-20deg); }
        }

        .shake {
            -webkit-animation-name: shake;
            -webkit-animation-duration: 0.6s;
            -webkit-transform-origin: 50% 50%;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-timing-function: linear;
        }
    </style>
    <script>
        var app = angular.module("ExampleApp", ['ngAnimate']);
        app.controller("MessagesCtrl", ['$scope', function ($scope) {
            $scope.count = 0;

            $scope.addMessage = function () {
                $scope.count++;
            };
        }]);

        app.directive('shake', ['$animate', 'MessagesCtrl', function ($animate) {
            return {
                scope: {
                    count: '='
                },
                link: function(scope, element, attrs) {
                    scope.$watch(attrs, function() {
                        $animate.addClass(element, 'shake').then(function() {
                            element.removeClass('shake');
                        });
                    });
                }
            };
        }]);
    </script>
</head>
<body ng-controller="MessagesCtrl">
    <button class="btn btn-primary" type="button">
        Messages <span shake id="badgeMessage" class="badge" ng-if="count > 0">{{ count }}</span>
    </button>
    <button ng-click="addMessage()">Add Message</button>
</body>
</html>

单击“添加消息”按钮时，未读计数会更改，但徽章上不会应用摇动动画。任何人都可以看到为什么这不发生？我认为问题在于我不包括指令中控制器的$范围，但我不知道如何做到这一点。

动画在“shake”属性指令中调用。

感谢您的时间和帮助。

Answer 1

将count传递到您已设置的隔离范围：

<span shake id="badgeMessage" class="badge" count="count" ...

同时将ng-if更改为ng-show。

然后看计数：

scope.$watch('count', function(newValue, oldValue) {

  if (newValue === oldValue) return;

  $animate.addClass(element, 'shake').then(function() {
    element.removeClass('shake');
  });
});

演示： http://plnkr.co/edit/pf5S0e705LK1q1OTGTcq?p=preview

如果你想继续使用ng-if，你可以这样做，让它第一次动画：

scope.$watch('count', function(newValue, oldValue) {
  if (newValue === oldValue) return;
  animate();
});

var animate = function() {
  $animate.addClass(element, 'shake').then(function() {
    element.removeClass('shake');
  });
};

$timeout(animate);

演示： http://plnkr.co/edit/sgSTOB5yqiaSgJL5Adl6?p=preview

关于范围更改的AngularJS animate元素

1 个答案: