Animate ng-click without jquery/js

Question

Hi I have a ribbon with some div's in a row within. If it overlaps and you can not see everything, I show an arrow left from the ribbon and an arrow right of the ribbon. With this arrows I can scroll throught the ribbon infinite in the circle (direction left or right).

My codes lookes like this:

<div class="arrow" ng-click="list.push(list.shift())>&larr;</div>
<div class="ribbon">
    <div class="ribbonItem" ng-repeat="item in list">
        {{ item.Name }}
    </div>
</div>
<div class="arrow" ng-click="list.unshift(list.pop())>&rarr;</div>

This works, but it's without an animation and increased. It also needs much clicks to scroll throught. How can I implement an animation without using jquery or js and just do it with this ng-click. I tried it with a transition on the css-classes ng-enter/ng-leave of my ng-repeat, but it does'nt work: https://docs.angularjs.org/api/ng/directive/ngRepeat (look at "Animations").

Has someone an idea?

Thanks.

Community · Accepted Answer · 2017-05-23 12:31:34Z

1

Similar question : how to use animation with ng-repeat in angularjs

Go through this link it might help you: http://www.nganimate.org/angularjs/ng-repeat/move

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Jun 7, 2016 at 8:47

Raj Suvariya

3591 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Animate ng-click without jquery/js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related