Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 405
Adam Montanaro Avatar asked Sep 25 '13 00:09

Adam Montanaro


1 Answers

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!

like image 195
betaorbust Avatar answered Oct 30 '22 15:10

betaorbust