Animation (or effect) on mouse over the angularjs way

[gurpal2000]

Hi

New to angularjs coming from jquery.

I have some thumbnails (150x150px). On mouse hover, i scale up the images a fraction about the center. Essentially a "zoom".

On mouse out, i reset the scale/position.

I can't get my head around how I would do the animate effect without jquery. CSS3?

Here's the jquery version. Any help most appreciated.

$('.thumb').hover(

function () {

var $img = $(this).find('img:first');

$img.stop(true).animate({

'width': '160px',

'height': '160px',

'marginTop': '-5px',

'marginLeft': '-5px'

}, 100);

}, 

function () {

var $img = $(this).find('img:first');

$img.stop(true).animate({

'width': '150px',

'height': '150px',

'marginTop': '0px',

'marginLeft': '0px'

}, 100);

}

);

Thanks

[gurpal2000]

I know i can create a custom Directive bound to mousenter/leave but then the element still would need to be animated. Will try ng-animate.

[gurpal2000]

Solved by injecting the $animate service and then using css in bound events.

[Bernhard Rode]

I'd always prefer a CSS only solution like this simple example - http://plnkr.co/edit/pDLTuHSPsONhH6faSIHz?p=preview

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

--

Bernhard Rode
M.Sc. (Master of Computer Science and Media)

fon +49.171.5629409
mail ma...@bernhardrode.de
twitter @ebbo

google+ google.com/+BernhardRode
twitter twitter.com/ebbo
facebook facebook.com/bernhard.rode

[gurpal2000]

That will work nicely thanks