Как я могу удалить класс, когда анимация закончилась?

0

Пожалуйста, помогите мне с этой проблемой. У меня есть кнопка под названием "параметры", и если она нажата, я хочу добавить к ней класс ".green", чтобы запустить анимацию. Анимация делает фон кнопки зеленой и начинает исчезать до первоначального цвета. Однако, если анимация закончена, я хочу, чтобы класс был удален автоматически. Это необходимо, потому что, если вы добавите класс во второй раз, он больше не работает. Я предпочитаю НЕ использовать функцию тайм-аута. У меня возникли небольшие проблемы с тем, чтобы он не работал каждый раз.

Ниже я опубликовал ссылку на мой код.

Мой код

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

.green {
    -webkit-animation: correct 0.4s ease-out;
    -moz-animation: correct 0.4s ease-out;
}
  • 0
    Предложите прочитать все документы по анимации и посмотреть на все классы, которые используются на стадиях анимации, предполагая, что вы делаете это в многочисленных директивах, поддерживающих анимацию. Тогда есть также $animate api
Теги:
animation

3 ответа

3

Вы можете прослушивать событие animationend элемента. Подробнее в этой статье.

В принципе, при условии, что button - это ваш элемент кнопки:

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

(... или Угловой эквивалент addEventListener.) Возможно, вам понадобятся префиксы поставщиков для этого имени события, подробности в статье.

Я подозреваю, что вы захотите удалить обработчик (показано выше), так как, конечно, удаление класса начнет новую анимацию.

Поделиться
  • 2
    на самом деле это не нужно. Модуль angular ngAmimte уже делает все это внутренне с помощью ряда различных классов, основанных на этапах. Просто вопрос использования этих классов в CSS
  • 0
    @charlietfl: еще лучше! (Это ответ , а не комментарий.)
Показать ещё 10 комментариев
0

Я посмотрел на ваши ответы, но также нашел более легкий ответ для решения проблемы. Я использовал одну строку jQuery для ее исправления:

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

Я просто хотел, чтобы вы знали..

Благодарю!

Поделиться
0

Вы можете определить повторно используемый компонент, который уведомляет конец анимации о элементе следующим образом:

.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;
    };
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню