지시어로 클릭 할 때 각진 색으로 변합니다.

지시어를 사용하여 클릭시 이미지가 흐려 지려고합니다. 지시문은 이미지가 처음 나타나면 (초기 페이지로드) 멋지게 사라지지만 클릭하면 발생하지 않습니다. 페이드없이 전환됩니다. ng-click="onClick()" 이벤트와 함께 작동하도록 지시문 fade-in을 얻으려면 어떻게해야합니까?지시어로 클릭 할 때 각진 색으로 변합니다.

에 $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; 
}

출처

2016-08-12 Agent Zebra

이미지를 클릭 할 때 변경하려고하고 이미지가로드 될 때마다 페이드 인하려면? –

@ravishankar 예, 정확하게. 단추를 사용하여이 작업을 시도했지만 지시문이 실행되지 않는 것과 동일한 문제가 발생했습니다. 단추를 완전히 보이지 않게하는 작업은 어려움이었습니다. D : 그래서 대신 ng-click을 사용했습니다. –

수업을 추가하고 제거하는 것은 결과를 얻지 못할 것이며, 수업 간의 시간 지연을 유지해야합니다. 'ng-hide-add' 클래스를 추가하기 전에'setTimeOut()'을 시도하십시오. –

이 시도 : 여기

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

희망이 있습니다.

출처

2016-08-12 04:38:55

감사합니다. 좋은 시도, 불행히도 아직 작동하지 않습니다. 나는 왜 그것이 매우 논리적 인 해결책처럼 보이지 않는지 궁금합니다. –

다시 한 번 감사드립니다. Ravi, 여기에서 내 대답을 얻었습니다. ==> http://www.bennadel.com/blog/2497-cross-fading-images-with-angularjs.htm –

고마워요! 너는 나의 하루를 정말로 구했다! – mark922

지시어로 클릭 할 때 각진 색으로 변합니다.

답변

관련 문제