AngularJS - 动画回调/序列

Posted 2023-03-13

【中文标题】AngularJS - 动画回调/序列

【英文标题】：AngularJS - animation callback / sequence

【发布时间】：2014-01-09 11:17:17

【问题描述】：

我只是在 Angular 中找到自己的方式，更重要的是在没有 jQuery 的情况下找到自己的方式！

我希望在从服务器获取数据时显示加载微调器的视图，当数据到达时（模型将具有“已填充”属性）我希望微调器淡出，并且内容淡入。

我正在使用加载位指令，ng-show 似乎很简单，可以切换视图中的部分。

查看：

<div ng-hide="model.Populated" loading-spinner></div>
<div ng-show="model.Populated"><!-- Content goes here --> </div>

指令：

module App.Directives 
declare var Spinner: any;
export class LoadingSpinner 
    constructor() 
        var directive: ng.IDirective = ;
        directive.restrict = 'A';
        directive.scope =  loading: '=myLoadingSpinner',
        directive.template = '<div class="loading-spinner-container"></div>';
        directive.link = function (scope, element, attrs) 
            var spinner = new Spinner().spin();
            var loadingContainer = element.find('.loading-spinner-container')[0];
            loadingContainer.appendChild(spinner.el);
        ;
        return directive;
    

这是我不确定的动画。特别是，一旦微调器完全淡出，我希望内容淡入，我不知道如何通过回调来做到这一点。

我应该使用 CSS 尝试所有动画还是扩展我的指令并使用 javascript？

（我正在为任何想知道语法的人使用 TypeScript）

【参考方案1】：

我昨天为我的应用做了一个快速峰值，这就是它可以轻松完成的方法。 这使用 ui.bootstrap 模态对话框。

当您有一个长时间运行的进程（例如远程服务调用）时，您可以通过 $emit “引发”一个事件。这将冒泡到您的最外层范围。以下是我针对它进行尖刺的 typeahead 搜索功能的示例。

   function autoCompleteClientName(searchValue, searchType) 

            var self = this;

            self.$emit("WorkStarted", "Loading Clients...");

            //return promise;
            if (searchType === 'name') 
                return $scope.clientSearchDataService.getClientsByName(searchValue)
                    .then(function (response) 

                        self.$emit("WorkCompleted", "");
                        return response.results;
                    , function(error) 
                        self.$emit("WorkCompleted", "");
                        console.warn("Error: " + error);
                    );
             else if (searchType === 'number') 
                return $scope.clientSearchDataService.getClientsByNumber(searchValue)
                   .then(function (response) 
                       self.$emit("WorkCompleted", "");;
                       return response.results;
                   , function (error) 
                       self.$emit("WorkCompleted", "");
                       console.warn("Error: " + error);
                   );
            
        ;

然后我们有一个“shell”控制器，它是最外层视图的控制器，即承载 ng-view 的控制器。

(function () 
    'use strict';

    // Controller name is handy for logging
    var controllerId = 'shellCtrl';

    // Define the controller on the module.
    // Inject the dependencies. 
    // Point to the controller definition function.
    angular.module('app').controller(controllerId,
        ['$scope', '$modal',  shellCtrl]);

    function shellCtrl($scope,$modal) 
        // Bindable properties and functions are placed on vm.
        $scope.title = 'shellCtrl';


        $scope.$on("WorkStarted", function(event, message) 

            $scope.modalInstance = $modal.open( templateUrl: "app/common/busyModal/busyModal.html" );
        );

        $scope.$on("WorkCompleted", function (event, message) 
            $scope.modalInstance.close();

        );



    
)();

这里是模态模板

<div class="modal-dialog">
    <div class="modal-content">
        <img src="/images/loading.gif" />
        <h3>Loading data...</h3>
    </div>
<!-- /.modal-content -->
</div><!-- /.modal-dialog -->

要让它出现，你必须覆盖一些样式

<style>
        .modal
        
            display: block;
        

        .modal-body:before,
        .modal-body:after
        
            display: table;
            content: " ";
        

        .modal-header:before,
        .modal-header:after
        
            display: table;
            content: " ";
        
    </style>

如果您需要模态的完整模板

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

请记住，这只是一个峰值，我花了大约 30 分钟才将它们连接在一起。对于更强大的解决方案，如果您正在执行多个调用以删除服务，则需要能够跟踪启动和完成的进程数等。