AngularJS: Slide divs automatically with a set duration on page load

Question

I have the following code:

index

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

    }
]

controller

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
}

All of the above code works fine when a have a call to the animateToID() function on a ng-click.

I need this to automatically start sliding through the templates using the duration values that appear in the pages JSON file. Once all the items in the JSON have completed, start again through the same array.

score 0 · Answer 1 · answered Aug 08 '13 at 18:28

Just a quick try, without testing. I would try something similar to this:

First define the animateToId to start after the duration of the current page element:

$scope.index = 0;

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

Then, make the animation start when json is loaded

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

Some helper functions:

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

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

I think it would be more practical to just make animate() and than pull the values out of the $scope.current() object.

Also, it'd be more the "angular way" if you just put a class on the object you want to animate and animate it via css3. The current angular version brings some animation features you may want to have a look to.

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

Hope this can help.

AngularJS: Slide divs automatically with a set duration on page load

1 Answers1