javascript - 使用 ng-class 有条件地添加 CSS3 动画

Question

我有两个 CSS3 动画，当我的 Controller 中的特定条件得到满足时，我将添加到 dom 中。当满足这些条件时，我目前正在使用 ng-class 引入不同的动画(摇动 Y 和摇动 X)。 (我只是包括相关的 js):

$scope.submitAnswer = function($index) {
    ...

    if ($index == current) {
        console.log('correct!');
        $scope.shaken = 'shakeY';
    }
    else {
        console.log('incorrect!');
        $scope.shaken = 'shakeX';
    }
}

这是相关的 HTML:

    <div 
        id="philosopher" 
        ng-class="shaken"
        ng-click="submitAnswer($index);" 
        ng-repeat="philosopher in philosophers">
        <img ng-src="images/{{philosopher.signifier}}.png" height="142px" width="auto" />
        <h2>{{philosopher.name}}</h2>
    </div>

这正如我所愿，但是，我发现我无法连续应用相同的动画类并让动画执行 - 我需要交替(在满足 if 语句和触发 else 之间切换).

我发现我可以使用自定义指令和 ngAnimate 来重复触发动画，但是我不知道如何根据 if else 的结果实现单独的动画这是指令之一:

app.directive('shake', function($animate) {
    return {
        restrict: 'A',
        scope: false,
        link: function(scope, element, attrs) {

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

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

            });
        }
    };
});

我怎样才能不断地将 shakeX 和 shakeY 重新应用到 ng-class，或者我怎样才能只根据 if else 语句的结果使用我的指令？

编辑

终于搞定了!感谢您的帮助，最终的工作是以正确的方式在 if 语句中实现超时功能。 (我知道从技术上讲你不应该在 if 语句中使用函数 [我认为这是一条规则，对吗？]，但我终于让它工作了!)这基本上就是我结束的地方:

    if ($index == current) {
        console.log('correct!');
        $timeout(function() {
            $scope.shaken = 'shakeY'
        })
    }
    else {
        console.log('incorrect!');
        $timeout(function() {
            $scope.shaken = 'shakeX'
        })
    }

Answer 1

我不认为你需要一个指令来实现你想要的。问题是当您在作用域中分配相同的值时，如果它具有相同的值，则不会触发作用域属性的观察器。您需要做的是将 scope 属性的值从诱饵值或空值更改，然后使用 $timeout 将值从诱饵值更改为原始值。

像这样:

DEMO

HTML

<div ng-class="shake" ng-click="shakeX()">Shake X</div>
<div ng-class="shake" ng-click="shakeY()">Shake Y</div>

JavaScript

$scope.shakeX = function() {
  $scope.shake = '';
  $timeout(function() {
    $scope.shake = 'shakeX';
  })
};

$scope.shakeY = function() {
  $scope.shake = '';
  $timeout(function() {
    $scope.shake = 'shakeY';
  })
};