javascript - 加载 Angular View 时动画 div block

Question

所以在这个fiddle两秒后，我有一个方 block 从左侧滑入。

(function (angular) {
    'use strict';

    angular.module('testApp', [])
        .controller('TestCtrl', function ($scope, $timeout) {
            $scope.title = "Hello";

            $scope.show = false;

            $timeout(function () {
                $scope.show = true;
            }, 2000);
        });

})(angular);

我希望在呈现 View 时让 block 滑入并且可以被用户看到。

已经有一个样式可以用来让方 block 滑入。

.left-inner-nav {
    position:absolute; 
      top:0; 
      /*left:75px;*/
      left: -150px;
      width: 150px; 
      bottom: 0; 
      background:#2792D9;
    -webkit-transition: left 2s ease;
    -moz-transition: left 2s ease;
    -ms-transition: left 2s ease;
    -o-transition: left 2s ease;
    transition: left 2s ease;
}

.left-inner-nav-animate {
    left: 0;
}

我只是不知道如何在 View 加载时执行此操作。

Answer 1

这就是ngAnimate是为了。

ngAnimate 添加了 4 个类，用于不同的 ngView 状态。

<style>
.slide.ng-enter { }        /* starting animations for enter */
.slide.ng-enter.ng-enter-active { } /* terminal animations for enter */
.slide.ng-leave { }        /* starting animations for leave */
.slide.ng-leave.ng-leave-active { } /* terminal animations for leave */
</style>

下载并包含对 angular-animate.js 的引用。然后，添加 ngAnimate 作为依赖

angular.module('testApp', ['ngAnimate']);

更新

标记

<div ng-view class="left-inner-nav"></div>

CSS

.left-inner-nav.ng-enter {} /* starting animations for enter */
.left-inner-nav.ng-enter.ng-enter-active {} <style>

.slide.ng-enter { }/* 开始动画 / .slide.ng-enter.ng-enter-active { }/ 输入的终端动画 */