ディレクティブを使用してクリックしたときに角度のあるフェードイン画像

Question

ディレクティブを使用してクリックして画像をフェードインしようとしています。このディレクティブは、画像が最初に表示されたとき（最初のページの読み込み時）にうまく機能し、うまくフェードインしますが、クリックしても表示されません。 ng-click="onClick()"イベントでディレクティブfade-inを使用するにはどうすればよいですか？

directiveの$element.addClass("ng-hide-add");の周りにタイムアウトを追加しようとしましたが、動作しませんでした。ここで

Here's a plunkr

はHTMLです：ここでは

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

JSです：あなたのディレクティブで

.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

はこれを試してください：ここで

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です

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

希望します。