title: AngularJS ng-show animation cross-fade inside ng-repeat
body: <p>Simple (but not for me!) angularjs show/hide animation problem.</p>
  
  <p>I have searched high and low but not found the solution to this <em>specific</em> problem, which can perhaps be best explained with an example and a "challenge".</p>
  
  <p>First, the example: <a href="http://jsfiddle.net/adammontanaro/QErPe/1/">http://jsfiddle.net/adammontanaro/QErPe/1/</a></p>
  
  <p>The challenge: can anyone make those images fade in and out <em>over</em> each other, rather than appearing <em>below</em> or <em>above</em> the currently shown image, then popping into place once the upper image's div is hidden?</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div data-ng-repeat="k in kitties" &gt;
          &lt;img ng-src="{{k}}" ng-show="selectedImage==$index" ng-animate="{show:'animate-show', hide:'animate-hide'}" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>FYI - this is using angular 1.1.5</p>
  
  <p>Thank you!!! Adam</p>