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

Question

Simple (but not for me!) angularjs show/hide animation problem.

I have searched high and low but not found the solution to this specific problem, which can perhaps be best explained with an example and a "challenge".

First, the example: http://jsfiddle.net/adammontanaro/QErPe/1/

The challenge: can anyone make those images fade in and out over each other, rather than appearing below or above the currently shown image, then popping into place once the upper image's div is hidden?

The HTML:

<div>
    <div data-ng-repeat="k in kitties" >
        <img ng-src="{{k}}" ng-show="selectedImage==$index" ng-animate="{show:'animate-show', hide:'animate-hide'}" />
    </div>
</div>

CSS:

.animate-show, .animate-hide {
  -webkit-transition:all linear 1s;
  -moz-transition:all linear 1s;
  -ms-transition:all linear 1s;
  -o-transition:all linear 1s;
  transition:all linear 1s;

}

.animate-show {
  opacity:0;
}

.animate-show.animate-show-active {
  opacity:1;
}

.animate-hide {
  opacity:1;
}

.animate-hide.animate-hide-active {
  opacity:0;
}

I have been spinning my wheels on this for hours. I've seen scads of good posts demonstrating how to make a single image or div appear or disappear, but it all breaks down when I'm trying to simple cross-fade and replace. I've tried messing about with absolute/relative positioning, but to no avail.

Tried this with a switch, but wasn't able to use $index in the switch condition, so I could load my images at run-time. That is a big requirement here.

FYI - this is using angular 1.1.5

Thank you!!! Adam

Reunion

Two years later and I was still looking everywhere for this question and solution :D – Pursy

Answer 1

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!

Whether

I forked this and made it a little nicer. Positioning the image elements on top of each other as stated in previous comments. jsfiddle.net/4qpRw/1 – Franchot

Answer 2

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.

Appulse

Answer 3

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.

Sparrow