Slide Transition with ng-show in IONIC

Question

Here is the codepen http://codepen.io/lakhan/pen/cukyL

I have a list of Items with ng-repeat and I am showing one item at a time. on clicking next showing the next item from the list. Now what I want to achieve is slide transition on Item when I am clicking on next. There is something I am missing from CSS side. any help will be appreciated.

Solution 1

Here is a codepen which kind of does what I think you want: http://codepen.io/anon/pen/ijLFq

The ng-animate directive is not supported anymore in AngularJS >= 1.2. And for ng-show based animations you have to use the ng-hide-add, ng-hide-remove CSS classes not the CSS classes described in the ngRepeat documentation. For a good explanation see: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#animating-ngshow-and-ng-hide

For the desired effect I had to use CSS3 animations. With CSS3 transitions I could not recreate the effect because sliding out to the left side and sliding in from the right side could not be modeled with tranisitons with the provided animation helper classes.

Understanding CSS3 animations and transitions and the differences between are pretty hard to understand. The site CSS3 Transitions, Transforms, Animation, Filters and more! helped me a lot.

Solution 2

The accepted answer was a little complicated for my use case and I couldn't get it working. I just wanted an element to slide up when it was shown, and back down when it was hidden. Here's what ended up working for me, in case it helps another lost soul:

.item-animate.ng-hide {
  height:0;
  opacity:0;
  padding:0;
}

.item-animate.ng-hide-remove,
.item-animate.ng-hide-add {
  display: block !important;
  transition: all linear 300ms;
}

Comments

[Salman Ullah Khan]

Do i need to provide any class to that list item i want to animate?

[Emerick]

how can i use this css?