菜单项的离子摇动动画

Question

为什么摇动动画对我的菜单项（有计数）不起作用？

我有以下菜单模板：

<li class="item" ng-repeat="(key, value) in menuItems">
  <a ng-click="navigateTo(value.title)" class="menu-icon {{value.title | lowercase}}" ng-class="{noitems: value.count==0}" shake-me>
  {{value.title}}
  <span ng-show="value.count==0" class="status">No items available in {{value.title | lowercase}}</span>
  </a>
</li>

指令 shake-me 看起来像：

angular
  .module('myApp')
  .directive('shakeMe', ['$animate', function($animate) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs, form) {
        element.on('click', function() {
          scope.$apply(function() {
            if (element.hasClass('noitems')) {
              $animate.addClass(element, 'shake', function() {
                $animate.removeClass(element, 'shake');
              });
            }
          });
        });
      }
    };

  }]);

和摇动动画(css3):

@keyframes shake {
  0% {transform: translateX(0);}
  12.5% {transform: translateX(-6px) rotateY(-5deg)}
  37.5% {transform: translateX(5px) rotateY(4deg)}
  62.5% {transform: translateX(-3px) rotateY(-2deg)}
  87.5% {transform: translateX(2px) rotateY(1deg)}
  100% {transform: translateX(0)}
}

.shake {
  -webkit-animation: shake 400ms ease-in-out;
  animation: shake 400ms ease-in-out;
}

提及：

添加了抖动 class 但由于某些原因动画无法正常工作（在 iOS 8+、Safari 上） $animate.addClass(element, 'shake', function() { $animate.removeClass(element, 'shake'); //this part is never called });

编辑

我用相同的场景创建了 a blank demo，它可能有助于更快地确定问题

Answer 1

自版本 1.3.0-RC.0 起，$animate 使用 promises 而不是回调。

更改为：

element.on('click', function() {

  scope.$apply(function() {

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

      element.removeClass('shake');
    });
  });
});

在您的演示中，您使用的是 .shake.ng-enter，它应该只是 .shake。

此外，您需要添加一些额外的 CSS 以使其在 Safari 中工作：

@keyframes shake {
  0% {transform: translateX(0);}
  12.5% {transform: translateX(-6px) rotateY(-5deg)}
  37.5% {transform: translateX(5px) rotateY(4deg)}
  62.5% {transform: translateX(-3px) rotateY(-2deg)}
  87.5% {transform: translateX(2px) rotateY(1deg)}
  100% {transform: translateX(0)}
}

@-webkit-keyframes shake {
  0% {-webkit-transform: translateX(0);}
  12.5% {-webkit-transform: translateX(-6px) rotateY(-5deg)}
  37.5% {-webkit-transform: translateX(5px) rotateY(4deg)}
  62.5% {-webkit-transform: translateX(-3px) rotateY(-2deg)}
  87.5% {-webkit-transform: translateX(2px) rotateY(1deg)}
  100% {-webkit-transform: translateX(0)}
}

.shake {
  -webkit-animation: shake 400ms ease-in-out;
  animation: shake 400ms ease-in-out;
}

演示： http://codepen.io/anon/pen/WQaXoe

菜单项的离子摇动动画

ionic shake animation of an menu item

angularjs

angularjs-directive

ionic-framework

ionic

ng-animate