CSS转换只有在第一次应用时才起作用

Question

作为我正在创建的AngularJS应用程序的一部分，我有一个记录列表，分为3个部分：当前选定记录之前的记录列表、当前选定记录以及当前选定记录之后的记录列表。记录列表和当前选定的记录都是从所有记录的单亲列表中创建的(此所有记录列表中记录的顺序不变)。因此，基本的HTML结构如下所示：

<div class="card list" ng-repeat="timeRecord in recordsBeforeCurrent">
....
</div>
<div class="card" ng-class="active" id="currentRecordCard">
....
<h2 ng-class="activeTimer" id="currentRecordTimer"></h2>
....
</div>
<div class="card list" ng-repeat="timeRecord in recordsAfterCurrent">
....
</div>

无论何时当前选择的记录发生更改，我都希望能够将css转换应用于currentRecordCard元素和currentRecordTimer元素。我使用以下css：

#currentRecordCard {
margin-top: 20px;
margin-bottom: 20px;
transition: margin 1s ease;
}
#currentRecordCard.active {
margin-top: 40px;
margin-bottom: 40px;
}
#currentRecordTimer {
font-size: 20px;
position: absolute;
left: 0;
margin-left: 16px;
transition: all 0.5s ease;
}
#currentRecordTimer.activeTimer {
font-size: 30px;
left: 50%;
margin-left: -57px;
}

每次用户单击recordsBeforeCurrent或recordsAfterCurrent列表中的记录时，都会调用一个函数resumeRecord()，当前如下所示：

$scope.resumeRecord = function(record){
$scope.active = "";
$scope.activeTimer = "";

*** 
currentRecord = null;
lists of before and after records are cleared;
currentRecord is set whichever record was just clicked;
lists of before and after records are recalculated;
***
$scope.active = "active";
$scope.activeTimer = "activeTimer";
}

目前，currentRecord第一次更改时转换工作正常，但之后每次更改currentRecord时都没有转换，.active和.activeTimer类属性始终处于活动状态，所以我不太确定问题是什么…

干杯

Answer 1

这样做。在Plunkr中进行测试。

<div class="card list"
ng-class="currentRecord === $index ? 'active' : ''"
ng-click="toggleRecord($index)"
ng-repeat="timeRecord in records">
<h2></h2>
</div>

JavaScript

$scope.toggleRecord = function($index) {
$scope.currentRecord = $index;
}

CSS

.card {
margin-top: 20px;
margin-bottom: 20px;
transition: margin 1s ease;
}
.card.active {
margin-top: 40px;
margin-bottom: 40px;
}
.card h2 {
font-size: 20px;
position: absolute;
left: 0;
margin-left: 16px;
transition: all 0.5s ease;
}
.card.active h2 {
font-size: 30px;
left: 50%;
margin-left: -57px;
}

Answer 2

终于按照我想要的方式完成了这项工作。我最终不得不更改控制器中的一些逻辑，并为卡创建自己的类(我使用的是Ionic，所以希望使用它们的类)，这样每条记录都只有一个列表。非常感谢所有帮助我的人，特别是Ruslanas Balčiúnas的Plunkr，这让我的事情变得更容易。