Question

所以在这个fiddle中，我在两秒后从左边滑入一个块。

(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);

我想在渲染视图时让块滑入，并且可以被用户看到。

已经有一种风格可以应用于滑块。

.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;
}

我只是坚持如何在视图加载时执行此操作。

Answer 1

这是ngAnimate的用途。

ngAnimate为不同的ngView状态添加了4个类。

<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-输入{} / *开始输入 /的动画输入的.slide.ng-enter.ng-enter-active {} / 终端动画* /

加载角度视图时动画div块

1 个答案:

更新