targeting a class for angular ng-show and ng-hide

Question

I have created a basic angular slider i am contemplating whether i show use ng-class or ng-show as it stands i am trying to create a fade transition on each json object change.

i am currently using ng-show and ng-hide, i am struggling to a class to achieved a css transition, is this even possible, secondly is it practice ? Plunkr

var timer;
$scope.startAuto = function() {
    timer = $interval(function(){
        $scope.jobNotification = ($scope.jobNotification + 1) % $scope.jobs.length;
    }, 5000);
};

$scope.isActive = function (index) {
    return $scope.jobNotification === index;

 };

$scope.showJobNotification = function (index) {
    if (timer){
        $interval.cancel(timer);
        $scope.startAuto();
    }
    $scope.jobNotification = index;
};

HTML

<ul class="tickrSlider">
            <li data-ng-repeat="job in jobs" ng-class="{'jobActive' :isActive($index)}" ng-show="isActive($index)">
                <h1>{{job.jobTitle}}</h1>
                <p>{{job.sector}}</p>
                <a href="/"></a>
            </li>
        </ul>

Answer 1

There's nothing wrong with your use of Angular here, you just need a little CSS:

ul {
  position:relative;
  height:100px;
}

nav {
  position:relative;
}

li {
  position:absolute;
  top:0;
  opacity:0.0;
  transition: opacity 2s;
}

.job-active {
  opacity:1.0;
}

The basic idea is to give the unordered list some height and make its position relative so that it will define a top for the list items and block out some screen space for them. Then the Nav element will lie underneath the list, and the list items will all be laid out on top of each other. You have to be careful to make sure that the height of the list is always equal to or greater than the tallest list item, or else the item will run over into the Nav. This is because the list items use absolute positioning to draw on top of each other. Removing list items from the layout using display:none won't work because the opacity transition would never show.

If you want to avoid defining the height of the list, you could experiment with CSS animation and key frames instead of transitions.

Here's my fork of your Plunker for experimentation .

Please note that the convention in CSS is to use hyphens (-'s) to separate logical words, rather than camelCase . I changed ng-class="jobActive" to ng-class="job-active" in the HTML as well.