Угловое увядание в изображении при нажатии с директивой

Question

Попытка выцветать изображение нажатием кнопки с помощью директивы. Директива отлично работает, когда изображение сначала появляется (загрузка начальной страницы), красиво стирая его, но это не происходит при нажатии, оно просто переключается без выцветания. Как я могу получить директиву fade-in для работы с событием ng-click="onClick()"?

Я попытался добавить тайм-аут вокруг $element.addClass("ng-hide-add"); в directive, но это не сработало.

Here's a plunkr

Вот HTML:

<img ng-src="img/{{randTarotImg}}.jpg" class="tarot animate-show" ng-click="onClick()" fade-in/> 

Вот в ЯШ:

angular.module('TarotApp') 
    .controller('TarotCtrl', function ($scope) { 

     $scope.tarotImg = []; 
      for (var i=1;i<=6;i++) { 
      $scope.tarotImg.push(i); 
     } 

     $scope.randTarotImg = $scope.tarotImg[Math.floor(Math.random() * $scope.tarotImg.length)]; 

     $scope.onClick = function() { 
       $scope.randTarotImg = $scope.tarotImg[Math.floor(Math.random() * $scope.tarotImg.length)]; 
     }; 

}) 

    .directive('fadeIn', function($timeout){ 
     return { 
      restrict: 'A', 
      link: function($scope, $element, attrs){ 
       $element.addClass("ng-hide-remove"); 
       $element.on('load', function() { 
        $element.addClass("ng-hide-add"); 
       }); 
      } 
     }; 
}); 

Вот CSS:

.animate-show.ng-hide-add, .animate-show.ng-hide-remove { 
    transition: all linear 0.5s; 
    display: block !important; 
} 

.animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove { 
    opacity: 0; 
} 

.animate-show.ng-hide-add, .animate-show.ng-hide-remove.ng-hide-remove-active { 
    opacity: 1; 
} 

Answer 1

В вашей директиве попробовать это:

.directive('fadeIn', function($timeout){ 
    return { 
     restrict: 'A', 
     link: function($scope, $element, attrs){ 
      $element.addClass("ng-hide-remove"); 
      $element.on('load', function() { 
       $timeout($element.addClass("ng-hide-add"),1000);//Adding timeout 
      }); 
     } 
    }; 

Надеюсь, это поможет.