Animating CSS properties with angular

Question

So... I am working on a horizontal menu with elements that overflow the x-axis of the window. Navigating items in the menu is done with the arrow keys, through an Angular controller.

I am trying to figure out a way to animate a CSS transition, that will make the whole menu shift left / right according to the navigation, so that the active item is always visible. This should be done without scrolling, since the window is set to overflow: hidden.

My first instinct was to use jquery .animate(), but that doesn't work for me inside an angular controller / directive.

HTML for the menu:

<section id="catContainer" cat-navigation ng-class="{'disabled': activeLevelIndex > 1}">
        <div ng-repeat="category in categories" ng-class="{'active': $index == activeCatIndex }" class="category selectable">
            <img class="catImg" ng-src="{{category.image}}" />
            <h2>{{category.name}}</h2>
        </div>
    </section>

and this is the code that i am triggering when the right/left button is pressed:

var current = $("#catContainer .category.active");
var left = current.position().left;
var right = left + current.width();
var shift;

if (right > $(window).width)
    shift =  -(1.2 * current.width()) + $("#catContainer").css("left-margin");
else if (left < 0){
    shift =  (1.2 * current.width()) + $("#catContainer").css("left-margin");
}

$("#catContainer").animate({
    "margin-left" : shift
    }, 400, function() {
        console.log("cat anim done.");
    });
$("#catContainer").css("margin-left", shift);

Currently, I get the "cat anim done" logged, but nothing actually happens. Any help with figuring out how to get this animation to work will be much appreciated.

Have you add the animate dependency JS file to your Angular app? Animations are not available unless you include the ngAnimate module as a dependency within your application. You can get this from here and include in your application if not. LINK: ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/… — Neeraj Verma
– Neeraj Verma, Commented May 19, 2015 at 13:51

alexrogers · Accepted Answer · 2015-05-19 13:52:52Z

Here, I just made this for you.

http://jsfiddle.net/q255npgr/1/

Rather than animate using JS, it is more efficient and easier to use CSS transitions. Just set the left property using JS and let the CSS take care of the rest.

css:

.item {
    width: 48px;
    height: 48px;
    border: 1px solid red;
    background: black;
    float: left;
    color: #FFF;
}
#mask {
    width: 70px;
    height: 50px;
    position: relative;
    overflow: hidden;
}
#slider {
    top: 0;
    left: 0;
    position: absolute;
    transition: 1s left; //THIS IS THE KEY PROPERTY
    width: 30000px;
    height: 50px;
}

JS:

var posish = 0;

$('#right').click(function(){
    $('#slider').css('left', posish -= 50);
});
$('#left').click(function(){
    console.log('ss', $('#slider').css('left'));
    $('#slider').css('left', posish += 50);
});

html:

<div id="mask">
    <div id="slider">
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
    </div>
</div>
<button id="left"><</button>
<button id="right">></button>

Note: you'll need the correct browser prefixes for the browser matrix that you need to support.

So in your case you'll be changing left property with this:

$("#catContainer").css("left", shift);

Further you can bind to a transition end event if you need to do something after the animation is complete.

I hope this helps!

thanks alex, that is a better approach, and saves me the trouble of working with animations inside angular.. :)

Collectives™ on Stack Overflow

Animating CSS properties with angular

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related