각도 변화 CSS 전환이 흐림

나는 가지고있는 목록을 새로 고치려하고 있습니다. 따라서 사용자가 새로 고침을 클릭하면 새 GET 요청이 작성되었음을 알리는 목록이 사라집니다. http://plnkr.co/edit/R0Gv2T?p=info이각도 변화 CSS 전환이 흐림

내 문제는 내가 가지고있는 방법입니다 : HTML

<div ng-controller="ModalDemoCtrl"> 

    <ul ng-repeat="friend in friends" class="animated" ng-class="{fadeIn: refresh === true}"> 
     <li>{{friend}}</li> 
    </ul> 

<button ng-click="refresh=!refresh"> Fade me in every time </button> 

</div>

CSS

.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

@-webkit-keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
@keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
.fadeIn { 
    -webkit-animation-name: fadeIn; 
    animation-name: fadeIn; 
}

물론

JS 여기

angular.module('plunker', ['ui.bootstrap']); 
var ModalDemoCtrl = function ($scope, $modal, $log) { 

    $scope.friends = ['andy', 'randy', 'bambi'] ; 

};

는 작업 plnkr입니다 변수 새로 고침을 true로 다시 설정하기 전에 false로 다시 설정해야하기 때문에 사용자는 목록을 한 번 클릭 한 후 두 번 클릭하여 사라지게해야합니다. 이것을 달성하기 위해 순수한 CSS를 통해 어디에 있습니까? 컨트롤러에서 범위 변수를 설정하고 클릭 기능을 호출 해 보았습니다.하지만이 시점에서는 혼란 스러울뿐입니다. 어떤 솔루션이든 열려 있습니다

출처

2014-10-20 Garuuk

를 사용하여 적용 할 수 있습니다된다 데이터 새로 고침 표시기입니다. 이러한 플래그를 모두 객체 배열로 변환 할 필요는 없습니다. http://plnkr.co/edit/RYBVUp?p=preview 개체 배열을 사용하면 매번 항목이 새 항목이됩니다 (hashKey의 차이로 인해) 애니메이션이 발생합니다. 항목 추가에 대한 고급 애니메이션을 보려면 ng-repeat 애니메이션 클래스/ – PSL

을 사용해보십시오. 감사합니다. @PSL이 기능은 정상적으로 작동하지만 더 많은 중첩되고 복잡한 객체가있어서 단순히 배열로 모두 캐스팅 할 수 없습니다. 나는 당신의 타임 아웃 아이디어를 사용하는 것을 끝내었지만, fade가 true인지 아닌지를 확인하고 timeout에서 false로 설정하고 ng-class에서 이것을 가지는 변수를 추가했다. 나는 내 대답을 위해 plnkr을 가지고있다. – Garuuk

[AngularJS를 사용하여 ng-hide를 사용하여 요소를 페이드 아웃하는 방법]의 가능한 복제본 (http://stackoverflow.com/questions/42928222/how-to-fade-out-element-using-ng-hide-with-angularjs) – Mistalis

@PLS timeout 아이디어를 사용했지만 ng-class를 유지하고 켜기/끄기 여부를 확인하는 변수를 추가했습니다. 그런 다음 시간 초과를 기다리기 전에 클릭 할 때 항상 false로 설정하십시오. 이 CSS 애니메이션의 이러한 종류의 모든을 가지고로

$scope.friends = [{name:'andy'}, {name:'randy'}, {name:'bambi'}] ; 
    $scope.refresh = function(){ 
     $scope.fadeCheck = true; 
     $timeout(function(){ 
      $scope.fadeCheck = false; 
     }, 300); 
    }

과 HTML은

<ul ng-repeat="friend in friends" class="animated" ng-class="{fadeIn: fadeCheck === false}"> 
    <li>{{friend.name}}</li> 
</ul>

http://plnkr.co/edit/Xp7E6s?p=preview

출처

2014-10-21 16:28:26 Garuuk

하나, 나는 angular-motion 체크 아웃 것입니다. 그렇지 않다면 ngAnimate 모듈에 연결해야합니다. ng-hide/ng-show를 사용하여 이런 종류의 물건을 처리 할 수있는 좋은 방법을 제공합니다. 그래서 CSS는

.fadeIn { 
    opacity: 0; 
} 
.fadeIn.ng-hide-remove { 
    -webkit-animation-name: fadeIn; 
    animation-name: fadeIn; 
}

이되고 당신의 HTML은

<ul ng-repeat="friend in friends" class="animated" ng-show="refresh"> 
    <li>{{friend}}</li> 
</ul>

당신은 또한뿐만 아니라 페이드 아웃 애니메이션을 제공하고 당신은 단지로 표시해야 CSS 규칙 .fadeIn.ng-hide

출처

2014-10-21 17:26:20 Vadim

각도 변화 CSS 전환이 흐림

답변

관련 문제