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.

Lindemann

Answer 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.

Amadus

Answer 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;
}

Summons

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

how can i use this css? – Revolving

Answer 3

I just took a look in the ionic.app.css file for animate and found some pre-made classes. I tested a couple and the found the item-remove-animate does a great job animating ng-show/ng-hide. You can get fancy and write some transitions yourself too, but for me this does the job.

Just add the item-remove-animate class to the div you're trying to hide or show.

Here's the relevant code:

<div class="view-mode item-remove-animate" ng-show="!editOn">

<div class="edit-mode item-remove-animate" ng-show="editOn">

This is the css that's already included in your project.

Annates