Question

当我的SPA状态发生变化时，我想要完成的是淡入和淡出效果。为了做到这一点，我认为使用ng-show和CSS动画并在状态发生变化时更改可见性是个好主意。

为了做到这一点，我创建了以下CSS

.fadePage {
    animation: fadein 3s;
}
.fadePage.ng-hide {
    animation: fadeout 3s;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

使用$stateChangeSuccess和$stateChangeStart事件检查状态更改。

$stateChangeStart会将变量showPageContents设置为false。这应该会引发淡出。我也推迟了状态的改变，因此用户可以看到淡出动画。

在$stateChangeSuccess我想触发淡入，我将showPageContents再次设置回true。

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
    log.debug('State change succes : `' + JSON.stringify(toState) + '`');
    $rootScope.kioskApplication.showPageContents = true;
    kiosk.updateClientViewState(toState.name);
});

$rootScope.$on('$stateChangeStart', function (event, nextState, currentState) {
    if ($rootScope.kioskApplication.showPageContents) {
        $rootScope.kioskApplication.showPageContents = false;
        event.preventDefault();
        $timeout(function () {
            $state.go(nextState.name);
        }, 3000);
    }
});

为了检查这些事件，我在控制器中设置了一个观察器。

$rootScope.$watch('kioskApplication.showPageContents', function () {
    $scope.showPageContents = $rootScope.kioskApplication.showPageContents;
});

随着上述代码的消失成功，但淡出似乎不会发生。通过调试，我可以看到$rootScope.kioskApplication.showPageContents设置正确，但这并没有触发观察者和/或ng-show。我认为这可能与更改状态有关，这可能会导致某些操作不再被执行，但我对此并不确定。

有没有办法可以用上面的代码触发淡出？

而且，上述方法看起来有点麻烦和复杂。我确信有更简单的方法可以触发淡入和淡出页面，但我不确定原因。

所以，如果你对这个问题有更好的解决方案，我很想知道如何，因为我还在学习AngularJS＆amp; CSS。

可能很高兴知道，用户不会触发状态更改。使用服务器发出的RPC调用触发这些更改。因此，我不能依赖屏幕上的用户操作。

为了完整起见，这是我正在使用的标记。

<div class="col-md-offset-3 col-sm-offset-0 col-md-6 col-sm-12 startcontainer fadePage" ng-show="showPageContents">
    <!-- the insides... -->
</div>

更改$ rootScope变量以触发$ stateChangeStart事件中的ng-show

0 个答案: