AngularJS ng-show animation cross-fade inside ng-repeat

You actually have it all correct! You're just missing a little CSS.

I fixed up your jsfiddle with the right stuff (a dash of position relative and absolute and a pinch of height) and it works like a charm.

The bulk of the new stuff is:

.container{    position: relative;    /* you have to add a height here if your container isn't otherwise set        becuse the absolutely positioned image divs won't calculate the height        for you */    height: 100px;}.image-repeat{    position: absolute;    top: 0;    left: 0;}

With the classes applied in your HTML as needed.

Check it out: http://jsfiddle.net/QErPe/2/

Hope that helps!

This appears to actually be more of a CSS problem than an angular problem. You need to position the two divs on top of each other and make sure that they are actually occupying the same space at the same time. After that the cross-fading should be a piece of cake.

You can also do plain CSS3 on the .ng-hide class. For example:

div img {    border: medium none;    margin: 0;    padding: 0;    opacity: 1;    -webkit-transition: opacity 1s ease 0s;    -moz-transition: opacity 1s ease 0s;    -o-transition: opacity 1s ease 0s;    transition: opacity 1s ease 0s;}div img.ng-hide {    opacity: 0;}

So now, when the ng-hide class is added, it will fade the opacity of the image. ngAnimate has it's place, but with simple CSS3 on the .ng-hide class, you can eliminate the frustrations.