Question

请帮我解决这个问题。我有一个名为＆＃39; options＆＃39;如果点击它，我想添加班级＆＃39; .green＆＃39;它开始动画。动画使按钮的背景变为绿色并开始将其淡化为原始颜色。但是，如果动画完成，我希望自动删除该类。这是必要的，因为如果您再次添加该类，它将不再起作用。我不想使用＆＃39;超时＆＃39;功能。我经历了一点麻烦，不能每次都工作。

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

My Code

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

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

Answer 1

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

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

button

（...或Angular等效于var handler = function() { button.removeEventListener("animationend", handler, false); // (Remove the class here) }; button.addEventListener("animationend", handler, false); // (Add the class here)。）您可能需要该事件名称上的供应商前缀，详见文章。

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

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

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

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

我只是想让你知道..

谢谢！

如何在动画结束时删除一个类？

3 个答案: