作为我正在创建的 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;
}
每次用户单击 recordsBeforeCurren
t 或 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
类属性始终处于事件状态,所以我不太确定问题出在哪里......
干杯
最佳答案
这样做。在 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;
}
关于javascript - CSS 过渡仅在第一次应用时有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29784756/