Adding slide animation to ng-repeat

Question

In my code I'm trying to create multiple div's which have a hide button in it. On clicking of this button , the respective div should fade away and the div's below it should come to top(i.e. they should fill in the space created by the vanished div through some animation).

Here is my html code:

<body ng-app="task" ng-controller="repeat"> <div ng-repeat='x in array' ng-hide="x.show"> <p>{{ x.text }} </p> <button ng-click="toggle($index)">Hide</button> </div> </body>

My js file contains the following:

var app = angular.module('task'); app.controller('repeat',function($scope){ $scope.array = [{ show: true, text:'Sample Text 1'}, { show: true, text:'Sample Text 2'}, { show: true, text:'Sample Text 3'}]; $scope.toggle = function(){ $scope.array[index].show = false ; }; })

And in my css I have the following code:

.ng-hide-add { animation:1s fade ease; } @keyframes fade{ 0% { opacity: 1; } 100% { opacity: 0; } }

I have looked at a lot of slider animations that are posted on the net and tried to adapt them to my program but have failed miserably till now.

Can you tell me what code should I add to make the animation possible. Would really appreciate your responses.

Sidharth Panwar · Accepted Answer · 2015-07-01 11:01:06Z

Try putting this css:

.ng-leave { -webkit-animation: fadeOutLeft 1s; animation: fadeOutLeft 1s; } .ng-enter { -webkit-animation: fadeIn 0.5s; animation: fadeIn 0.5s; }

RIYAJ KHAN · Accepted Answer · 2015-07-01 11:27:08Z

You can try this one.

Here is the Plunker

JS :

directive("divAnimate",function(){ return { link : function(scope,ele,attr){ ele.bind('click',function(){ $(this).parent().fadeOut() }) } } })

HTML :

<body ng-app="task" ng-controller="repeat">{{}} <div ng-repeat="x in array" ng-show="x.show"> <p>{{ x.text }} </p> <button div-animate>Hide</button> </div> </body>

Instead of fadeOut() you can use any jquery method to give animation effect

Arlen Beiler · Accepted Answer · 2015-07-01 13:43:57Z

Try using transitions. http://jsfiddle.net/bzr1fc5v/10/

.fade { transition-property: opacity, height; transition-duration: 0.5s, 0.5s; transition-delay: 0s, 0.5s; opacity:0; height: 0; } div { height: 50px; }

And the HTML

<div ng-app="task" ng-controller="repeat"> <div ng-repeat='x in array track by $index' ng-class="[x.show ? '' : 'fade']" > <p>{{ x.text }}</p> <button ng-click="toggle($index)">Hide</button> </div> <div>

Notice that I had to set the height of the div. Also, you may want to add the vendor prefixes as well to catch older browsers.

-webkit- -moz- -ms- -o-

You could also add an event handler to actually hide it once it is faded.

$('div').on('transitionend', function(e){ if(e.originalEvent.propertyName == 'height') $(e.target).hide(); })

Collectives™ on Stack Overflow

Adding slide animation to ng-repeat

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related