Question

我创建了一个基本的角度滑块，我正在考虑是否显示使用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中的约定是使用连字符（ - ＆＃39; s）来分隔逻辑单词，而不是camelCase。我也在HTML中将ng-class="jobActive"更改为ng-class="job-active"。

针对角度ng-show和ng-hide的类定位

1 个答案: