Анимация на календарна директива при промяна на модела. Проблеми с цикъла на смилане

Това е първият ми проект с angular и имам проблеми да разбера цикъла на дайджест на системата.

Моят проблем е следният.

Създадох директива за месечен календар. Дните се показват с ng-повторение, което повтаря списък на променлива, наречена scope.days.

<div class="month-calendar>
    <div class="month-calendar-month">{{month}}</div>

    <div class="month-calendar-daysweek" ng-repeat="dayweek in daysweek">{{dayweek}}</div>

    <div class="month-calendar-day" ng-repeat="day in days">{{day}}</div>

    <div class="month-calendar-nav-prev" ng-click="previousMonth()"</div>
    <div class="month-calendar-nav-current" ng-click="currentMonth()"</div>
    <div class="month-calendar-nav-next" ng-click="nextMonth()"</div>
</div>

Календарът е правилно изграден, защото имам всеки ден вграден блок и с процент 1/7 * 100%.

Когато извикам някоя от функциите previousMonth(), currentMonth() или nextMonth(), генерирам новия месец чрез нулиране на scope.days и актуализиране с новите стойности.

Това, което искам, е да добавя ефект на слайд върху промяната на месеца. Ако щракна върху следващия месец, старият ще се плъзне наляво навън, а новият ще се плъзне наляво. Ако щракна върху предишния, слайдът ще бъде с дясна посока.

Затова добавих променливата scope.slideDirection, която може да обработва "left" или "right" и която е обвързана с ng-класа на родителския div месец-календар.

Накрая, за да добавя анимацията, добавих модула ngAnimate, добавих променлива scope.showCalendar, която е булева и която също е обвързана с ng-show на родителския div месец-календар.

С css имам класовете, които стилизирах с правилни анимации

.month-calendar.left.ng-hide-add
.month-calendar.left.ng-hide-remove
.month-calendar.right.ng-hide-add
.month-calendar.right.ng-hide-remove

Сега проблемът е в моята функция, която променя месеца. Бих искал да имам това за следващия месец

scope.slideDirection = "left";
scope.showCalendar = false;
scope.generateNextMonth();
scope.showCalendar = true;

Проблемът е, че цикълът на дайджест се стартира в края на инструкциите и посоката не е зададена, когато настъпи преходът. Освен това преходът няма достатъчно време за стартиране, тъй като булевото значение е превключващо true веднага след false.

Ето едно решение, което написах, но изглежда, че изпълнява няколко цикъла на дайджест и може да не съм правилният начин за това. Много е бавен на мобилни устройства.

scope.slideDirection = "left";

$timeout(function() {

    $timeout(function() {
        scope.showCalendar = false;
    }, 0);

    $timeout(function() {
        scope.generateNextMonth();
    }, 300);

    $timeout(function() {
        scope.showCalendar = true;
    }, 300);
}, 0);

Ако някой има идея и знае кой е идеалният начин да го направи, би било страхотно.

Благодаря

РЕДАКТИРАНЕ

Ето FIDDLE

Във цигулката зададох прехода на непрозрачност 0 или 1 вместо на слайд. (само за опростяване). И анимацията не се изпълнява правилно всеки път. Не мога да разбера защо.


angularjs refresh directive digest
person Loric-    schedule 31.07.2014    source източник

Отговори (1)


arrow_upward
0
arrow_downward

доколкото разбирам, вие променяте стойността "showCalendar" в рамките на един и същ цикъл на дайджест, което кара Angular наистина да не прави нищо с него.

Въпреки че не ми е ясно защо трябва да промените стойността на "showCalendar", трябва да сте добре само с едно изчакване:

scope.slideDirection = "left";
scope.showCalendar = false;
scope.generateNextMonth();
$timeout(function() {
  scope.showCalendar = true;
}, 300);

Ще помогне с цигулка по въпроса :-)

person christianalfoni    schedule 31.07.2014
comment
Всъщност slideDirection не се актуализира директно в dom, така че анимацията ще започне с последната стойност на slideDirection... Добавих цигулка в публикацията си. - person Loric-; 31.07.2014