CSS 过渡仅在第一次应用时起作用答案

【问题标题】：CSS transitions only work the first time they are appliedCSS 过渡仅在第一次应用时起作用
【发布时间】：2015-04-23 20:20:40
【问题描述】：

作为我正在创建的 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 类属性始终处于活动状态，因此我不太确定问题是什么......

干杯

【问题讨论】：

如果你只是添加 css 类，你可以使用ng-class。目前，你不是用 Angular 的方式来做的。
@maddog 好的，我刚刚将代码更改为使用 ng-class，但不幸的是它似乎没有什么不同：/
可以做一个plunkr吗？因为我不确定你如何使用来自ng-repeat的timeRecord
完全确定，您的意思是应用了样式，但是它们“捕捉”而没有动画，对吗？还有你在什么浏览器上测试这个？
你真的必须把列表分成三部分吗？为什么？

标签： javascript html css angularjs css-transitions

【解决方案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;
}

【讨论】：

因为我需要将列表分成 3 张单独的卡片，所以我不确定这是否可行。
很遗憾，不抱歉。我认为我的主要问题是，在当前记录之前和之后，我仍然需要一个带有 card 类的父 div，否则列表中的每个元素最终都会出现在自己的单独卡片中。
好的。你可以检查我的最后一次尝试。

【解决方案2】：

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

【讨论】：