Javascript CSS转换仅在第一次应用时有效

作为我创建的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>

$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";
}

每次用户单击

recordsBeforRecurren

t或

recordsAfterCurrent

列表中的某个记录时，都会调用一个函数

resumeRecord（）

，当前如下所示：

<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>

$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

类属性始终处于活动状态，因此我不太确定问题出在哪里

---

干杯

像这样做吧。测试一下

CSS

---

终于按照我想要的方式工作了。最后，我不得不更改控制器中的一些逻辑，并为这些卡创建自己的类（我正在使用Ionic，所以希望使用它们的类），以便每个记录只有一个列表。非常感谢所有帮助过我的人，特别是Ruslanas Balčiūnas的Plunkr，它让我的工作变得更加轻松。

如果你只是添加css类，你可以使用

ng类

。目前，你做的不是角度。@maddog好的，我刚刚将代码改为使用ng类，但不幸的是，它似乎没有什么区别：/plunkr可以吗？由于我不确定如何使用

timeRecord

from

ng repeat

来完全确定，您的意思是应用了样式，但它们“捕捉”而没有动画，对吗？还有，你们在哪个浏览器中测试这个？你们真的要把列表分成三部分吗？为什么？因为我需要将列表分成3张独立的卡片，我不确定这是否有效。不幸的是，我并不抱歉。我认为我的主要问题是，在当前记录前后的列表中，我仍然需要一个带有class

card

的父div，否则列表中的每个元素都将位于其各自的卡中。Ok。你可以检查我的最后一次尝试。

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

.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;
}