Элемент анимации AngularJS при изменении области

Я новичок в AngularJS и на данный момент я пытаюсь настроить анимацию AngularJS.Элемент анимации AngularJS при изменении области

Я написал класс анимации CSS, который я хотел бы применить к значку Bootstrap Twitter на кнопке «Сообщение», когда значение на значке изменится.

Непрочитанное количество сообщений обрабатывается контроллером «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 контроллера в директиве, но я не уверен, как это сделать.

Анимация вызывается внутри директивы атрибута «встряска».

Спасибо за ваше время и помощь.

источник

2014-11-11 rvanhoepen

Вы не можете смотреть все «attrs» в своей директиве встряски. Если вы хотите посмотреть изменения его значения, вы можете попробовать $ scope. $ Watch ('count', ...). – floribon

count Pass в изолированном объеме вы создали:

<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

источник

2014-11-12 08:25:15 tasseKATT

Большое вам спасибо за помощь, это решило мою проблему – rvanhoepen

Добро пожаловать :) – tasseKATT

Действительно хороший подход. – Fabiot

Элемент анимации AngularJS при изменении области

ответ

Смежные вопросы