动画结束后如何删除类？

Question

请帮我解决这个问题。 我有一个名为“选项”的按钮，如果单击它，我想将“.green”类添加到它以启动动画。动画使按钮的背景变为绿色，并开始将其淡化为原始颜色。但是，如果动画完成，我希望自动删除该类。这是必要的，因为如果您第二次添加该类，它就不再起作用了。我不喜欢使用“超时”功能。我遇到了一点麻烦，不能每次都工作。

我在下面发布了一个指向我的代码的链接。

My Code

@keyframes correct {
  from { color:forestgreen; }
}

.green {
    -webkit-animation: correct 0.4s ease-out;
    -moz-animation: correct 0.4s ease-out;
}

Answer 1

我查看了您的答案，但也找到了更简单的答案来解决问题。 我用了一行jQuery来修复它：

$('#' + String(list.answers[list.x])).addClass('green').one('animationend', function(){$(this).removeClass('green')});

我只是想让你知道..

谢谢！

Answer 2

你可以定义一个可重用的组件来通知元素上的动画结束，如下所示：

.directive("onAnimationEnd", ["$timeout", function($timeout){
  return {
    scope: {
      onAnimationEnd: "&"
    },
    link: function(scope, element, attributes){
      element.on("animationend", function(e){
        $timeout(funciton(){
          scope.onAnimationEnd({event: e});
        });
      });
    }
  };
}]);

在您的 HTML 中，使用自定义指令以及 ng-class 和 ng-click 指令，如下所示：

<!-- the method `removeGreenClass` will be called at the end of animation -->
<button ng-class="{green: started}" ng-click="animationStarted = true" on-animation-end="removeGreenClass(event)">

然后通过如下更新控制器来定义removeGreenClass 方法：

.controller("MainCtrl",function($scope){
  console.log("Main Controller says: Hello World");
    var home = this;
    home.opties = false;

    $scope.animationStarted = false; // initially false

    $scope.removeGreenClass = function(event){
        $scope.animationStarted = false;
    };
});

Answer 3

您可以在元素上侦听animationend 事件。 More in this article.

基本上，假设button 是您的按钮元素：

var handler = function() {
    button.removeEventListener("animationend", handler, false);
    // (Remove the class here)
};
button.addEventListener("animationend", handler, false);
// (Add the class here)

（...或 addEventListener 的 Angular 等效项。）您可能需要该事件名称上的供应商前缀，文章中的详细信息。

我怀疑你会想要删除处理程序（如上所示），因为删除类当然会启动另一个动画。