2016-08-12 28 views
1

ディレクティブを使用してクリックして画像をフェードインしようとしています。このディレクティブは、画像が最初に表示されたとき(最初のページの読み込み時)にうまく機能し、うまくフェードインしますが、クリックしても表示されません。 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; 
} 
+0

クリックで画像を変更しようとしていますが、画像が読み込まれるたびにフェードインしたいですか? –

+0

@ravishankarはい、正確です。私はボタンを使ってこれを試しましたが、私はディレクティブが発射されていないという同じ問題を抱えていました(そして、ボタンを完全に見えないようにすることも挑戦でした):D、代わりにng-clickを使いました。 –

+0

クラスを追加したり削除したりしても結果が得られない場合は、クラス間のタイムラグを維持する必要があります。 'ng-hide-add'クラスを追加する前に' setTimeOut() 'を試してください –

答えて

2

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

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

希望します。

+0

ありがとう、素敵な試み、残念ながらまだ働いていない。なぜそれは非常に論理的な解決策のように見えないのだろうか? –

+0

もう一度おかげでラヴィ、私はここで私の答えを得ることに終わった==> http://www.bennadel.com/blog/2497-cross-fading-images-with-angularjs.htm –

+0

ありがとう男!あなたは本当に私の一日を救った! – mark922

関連する問題