0

我有以下代码：

指数

    <div id="app" ng-controller="AppCtrl">

    <div id="container"  ng-controller="PageCtrl">
        <div ng-repeat="page in pages" id="{{page.prop_id}}">
            <ng-include src="page.template" />
        </div>
    </div>

JSON

[
    {
        "prop_id"       : "FORD0109",
        "prop_title"    : "Lorem Ipsum",
        "prop_postcode" : "",
        "prop_price"    : "",
        "prop_image"    : "",
        "prop_desc"     : "Lorem Ipsum",
        "template"      : "views/prop_no_thumbs.html",
        "info_image"    : "",
        "duration"      : "4000"

    }
]

控制器

var presentation = angular.module("Presentation", ['ngResource']);

function AppCtrl($scope, $http) {
    $http.get('json/pages.json').success(function (data) {
        $scope.pages = data;
    });

    $scope.animateToId = function (id, container, duration) { //the id to animate, the easing type
        id = "#" + id;
        var $container = $(container); //define the container to move
        var left = $(id).position().left;
        var animSpeed = 2000; //set animation speed
        var ease = "easeOutQuart";
        $container.stop().animate({"left":-(left)}, animSpeed, ease);
    }
}

function MenuCtrl($scope) {
    //placeholder for Menu actions
}

function PageCtrl($scope) {
    //placeholder for Page actions
}

当 a 调用 a 上的animateToID()函数时，上述所有代码都可以正常工作ng-click。

我需要它来使用页面 JSON 文件中出现的持续时间值自动开始滑过模板。JSON 中的所有项目都完成后，通过同一个数组重新开始。

4

1 回答 1

0

只是快速尝试，无需测试。我会尝试类似的事情：

首先定义 animateToId 在当前页面元素的持续时间之后开始：

$scope.index = 0;

$scope.animateToId = function(a, b, b) {
  ...
  $setTimout(function() {
    $scope.next();
    $scope.animateToId(a,b,c);
  }, $scope.current().duration);
}

然后，让动画在加载 json 时开始

$http.get('json/pages.json').success(function (data) {
  $scope.pages = data;
  $scope.animateToId(a,b,c);
});

一些辅助函数：

$scope.next = function() {
  $scope.index++;
  if ($scope.index >= $scope.pages.length) $scope.index = 0;
}

$scope.current = function() {
  return $scope.pages[$scope.index];  
};

我认为只制作 animate() 而不是将值从 $scope.current() 对象中提取出来会更实用。

此外，如果您只是在要设置动画的对象上放置一个类并通过 css3 对其进行动画处理，那将是更多的“角度方式”。当前的 Angular 版本带来了一些您可能想要查看的动画功能。

http://www.yearofmoo.com/2013/05/enhanced-animations-in-angularjs.html

希望这能有所帮助。

于 2013-08-08T18:28:08.320 回答