css переход с угловым

Question

Не могли бы вы помочь мне написать переход css с угловым, когда я нажимаю на ссылку? Мой код не работает.

Я бы связать это Див:

<div id="encartUserRes" class="encartRes" ng-class="{'flash': isFlash}">....</div> 

к "флэш", когда я нажимаю на эту ссылку:

<a class="suggestPro" ng-click="isFlash=1;">...</a> 

CSS:

#encartUserRes { 
    border: 1px solid rgba(6, 180, 200, 0.9); 
    position:absolute; 
    right:0; 
    left:0; 
    top: 27%; 
    opacity: 1; 
    -webkit-transition: opacity 2s ease-in-out; 
    -moz-transition: opacity 2s ease-in-out; 
    -ms-transition: opacity 2s ease-in-out; 
    -o-transition: opacity 2s ease-in-out; 
    transition: opacity 2s ease-in-out; 
} 
#encartUserRes.flash{ 
    opacity: 0; 
} 

controllers.js:

$scope.isFlash = false; 

Answer 1

это выглядит, как вы были в состоянии решить не функционирующий $ области действия части, как для флэш-анимации вы можете сделать это с помощью @keyframes анимации

@keyframes flash { 
    0% { 
     opacity: 1.0; 
    } 
    50% { 
     opacity: 0.0; 
    } 
    100% { 
     opacity: 1.0; 
    } 
} 
@-webkit-keyframes flash { 
    0% { 
     opacity: 1.0; 
    } 
    50% { 
     opacity: 0.0; 
    } 
    100% { 
     opacity: 1.0; 
    } 
} 
.flash { 
    animation: flash 1s step-start 0s; 
    -webkit-animation: flash 1s step-start 0s; 
} 

вот working jsfiddle example. используя jQuery и без угловых, например, для целей.

Answer 2

Я не знаю, почему, но мне пришлось изменить и добавить:

HTML:

<a class="suggestPro" ng-click="changeisFlash();">...</a> 

controllers.js:

$scope.changeisFlash = function() { 
    $scope.isFlash = true; 
}