Question

我有以下代码：

索引

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

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

我需要使用页面JSON文件中显示的持续时间值自动开始在模板中滑动。完成JSON中的所有项目后，再次通过相同的数组启动。

Answer 1

快速尝试，无需测试。我会尝试类似的东西：

首先将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为其设置动画，那么它就更像是“有角度的方式”。当前的角度版本带来了一些您可能想要查看的动画功能。

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

希望这可以提供帮助。

AngularJS：在页面加载时自动滑动div并设置持续时间

1 个答案: