Question

这是我的第一个有棱角分明的项目，我在理解系统的摘要周期时遇到了问题。

我的问题如下。

我创建了一个月历指令。使用ng-repeat显示日期，该重复迭代名为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并使用新值更新来生成新月。

我想要的是为月份更改添加幻灯片效果。如果我点击下个月，旧的将向左滑动，新的将向左滑动。如果我点击上一个，幻灯片将是正确的方向。

所以我添加了可以处理“left”或“right”的变量scope.slideDirection，它绑定到父div月历的ng-class。

最后，为了添加动画，我添加了ngAnimate模块，我添加了一个变量scope.showCalendar，它是一个布尔值，并且也绑定到父div月历的ng-show。

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

现在问题在于我的功能改变月份。我想为nextMonth提供这个

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

问题是摘要周期是在指令结束时启动的，并且在转换发生时未设置方向。此外，转换没有足够的时间来启动，因为布尔值在错误后立即切换为真实。

这是我写的解决方案，但它似乎运行了几个摘要周期，我可能不是正确的方法。它在移动设备上非常慢。

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而不是幻灯片。（只是为了简化）。并且动画每次都无法正确运行。我不明白为什么。

Answer 1

据我所知，你正在改变同一摘要循环中的“showCalendar”值，导致Angular真的不对它做任何事情。

虽然我不清楚为什么你需要更改“showCalendar”值，你只需要一次超时就可以了：

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

这将有助于解决这个问题： - ）

模型更改时的日历指令动画。消化周期问题

1 个答案: