單擊指令時圖像中的角度淡入

Question

嘗試使用指令淡化圖像。 該指令在圖像首次出現時（初始頁面加載）效果很好，可以很好地使其淡入，但是單擊時不會發生這種情況，它只會切換而不會褪色。 如何獲得指令fade-in以與ng-click="onClick()"事件配合使用？

我嘗試在$element.addClass("ng-hide-add");周圍添加超時$element.addClass("ng-hide-add"); 在directive ，但是沒有用。

這是一個小矮人

這是html：

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

這是js：

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

希望這可以幫助。