AngularJS在范围更改时为元素设置动画_Angularjs_Animation

AngularJS在范围更改时为元素设置动画

angularjs animation

AngularJS在范围更改时为元素设置动画,angularjs,animation,Angularjs,Animation,我是AngularJS新手，目前我正在尝试AngularJS动画我编写了一个CSS动画类，我想在消息按钮上的TwitterBootstrap徽章上的值更改时应用该类未读消息计数由MessagesCtrl控制器处理目前，单击“添加消息”按钮时，计数会发生变化以下是我迄今为止的完整应用程序： <!DOCTYPE html> <html ng-app="ExampleApp"> <head> <link rel="stylesheet" hre

我是AngularJS新手，目前我正在尝试AngularJS动画

我编写了一个CSS动画类，我想在消息按钮上的TwitterBootstrap徽章上的值更改时应用该类

未读消息计数由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>

单击“添加消息”按钮时，未读计数会更改，但不会在徽章上应用抖动动画。有人知道为什么没有发生吗？我想问题是我没有将控制器的$scope包含到指令中，但我不确定如何做到这一点

动画在shake attribute指令内调用

感谢您的时间和帮助。

将计数传递到您设置的隔离作用域：

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

演示：

如果您想继续使用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);

演示：

将计数传递到已设置的隔离作用域：

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

演示：

如果您想继续使用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);

演示：

您不能在shake指令中查看整个属性。如果您想查看其计数值的变化，可以尝试$scope。$watch'count'，..您不能在shake指令中查看整个属性。如果您想查看其计数值的变化，可以尝试$scope。$watch'count'，…非常感谢您的帮助，这很好地解决了我的问题。使用您的答案作为模板，我发现这在不使用ngAnimate的情况下是可以实现的。非常感谢您的帮助，这解决了我的问题真的很好的方法。使用您的答案作为模板，我发现这是可以实现的，无需使用ngAnimate。非常感谢