javascript - 针对 Angular ng-show 和 ng-hide 的类

Question

我已经创建了一个基本的 Angular slider 我正在考虑我是否显示使用 ng-class 或 ng-show 因为它代表我正在尝试创建淡入淡出过渡每个 json 对象都会更改。

我目前正在使用 ng-show 和 ng-hide，我正在努力上课以实现 css 转换，这是否可能，其次是练习吗？ 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

您在这里使用 Angular 没有任何问题，您只需要一点 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;
}

基本思想是给无序列表一些高度并使其位置相对，这样它将为列表项定义一个顶部并为它们遮挡一些屏幕空间。然后 Nav 元素将位于列表下方，列表项将全部放置在彼此之上。您必须小心确保列表的高度始终等于或大于最高的列表项，否则该元素将超出导航范围。这是因为列表项使用绝对定位在彼此之上绘制。使用 display:none 从布局中删除列表项将不起作用，因为不透明度过渡永远不会显示。

如果您想避免定义列表的高度，您可以尝试使用 CSS 动画和关键帧而不是过渡。

这是 my fork of your Plunker for experimentation .

请注意，CSS 中的约定是使用连字符 (-'s) 来分隔逻辑词，而不是 camelCase。我也在 HTML 中将 ng-class="jobActive" 更改为 ng-class="job-active"。