動畫結束后如何刪除課程？

Question

請幫我解決這個問題。 我有一個名為“選項”的按鈕，如果單擊它，我想向其添加類“ .green”以啟動動畫。 動畫使按鈕的背景變為綠色，並開始使其褪色為其原始顏色。 但是，如果動畫結束了，我希望該類自動刪除。 這是必要的，因為如果您第二次添加該類，它將不再起作用。 我更喜歡不使用“超時”功能。 我遇到了一些麻煩，無法每次都無法正常工作。

在下面，我發布了指向我的代碼的鏈接。

我的密碼

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

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

Answer 1

您可以偵聽元素上的animationend事件。 本文更多內容 。

基本上，假設button是您的button元素：

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

（...或addEventListener的Angular等效項。）您可能需要該事件名稱的供應商前綴，本文中有詳細信息。

我懷疑您將要刪除處理程序（如上所示），因為刪除該類當然會啟動另一個動畫。

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')});

我只是想讓你知道..

謝謝！