Переходы CSS работают только при первом применении

Как часть приложения AngularJS, которое я создаю У меня есть список записей, которые были разбиты на 3 раздела: Список записей до текущего выбранную запись, текущую выбранную запись, а затем список записей после текущей выбранной записи. Оба списка записей и текущая выбранная запись создаются из одного родительского списка всех записей (порядок записей в этом списке всех записей не изменяется). Таким образом, основной HTML структура выглядит следующим образом:Переходы CSS работают только при первом применении

<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 т или 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 всегда активны, поэтому я не слишком su что проблема ...

Cheers

источник

2015-04-21 MichaelCPG

Если вы просто добавляете класс css, вы можете использовать 'ng-class'. В настоящее время вы не делаете это Угловым способом. – batmaniac7

@maddog Ok Я только что изменил код, чтобы использовать ng-класс, но, к сожалению, это не изменило:/ – MichaelCPG

было бы возможно сделать plunkr? как я не уверен, как вы используете 'timeRecord' из' ng-repeat' – batmaniac7

Сделайте это так. Проверьте его на 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; 
}

источник

2015-04-22 00:15:47

Потому что мне нужен список, который нужно разделить на 3 отдельные карты. Я не уверен, что это сработает. – MichaelCPG

Можете ли вы решить это в CSS? –

К сожалению, не жалко. Я думаю, что моя основная проблема заключается в том, что мне по-прежнему нужен родительский div с классом 'card' вокруг списка до и после текущей записи, иначе каждый элемент в списке окажется в отдельной карточке. – MichaelCPG

Наконец получил это работает так, как я хотел. Мне пришлось изменить какую-то логику в контроллере и создать свои собственные классы для карт (я использую Ionic, поэтому надеялся использовать их классы), так что для каждой записи есть только один список. Огромное спасибо всем, кто мне помог, особенно Русланах Балчунас с вашим Plunkr, который сделал меня намного легче.

источник

2015-04-22 02:05:30 MichaelCPG

Переходы CSS работают только при первом применении

ответ

Смежные вопросы