AngularJS ng-show анимация перекрестное затухание внутри ng-repeat

Простой (но не для меня!) angularjs показать/скрыть проблему с анимацией.

Я искал высокий и низкий, но не нашел решение этой конкретной проблемы, что, возможно, лучше всего объяснить с помощью примера и "задачи".

Во-первых, пример: http://jsfiddle.net/adammontanaro/QErPe/1/

Задача: может ли кто-нибудь заставлять эти изображения исчезать и выходить друг за другом, а не появляться ниже или выше текущего показанного изображения, а затем появляться на месте после того, как верхнее изображение div скрыто?

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

Я часами вращаю свои колеса. Я видел несколько хороших сообщений, демонстрирующих, как сделать одиночное изображение или div, появляться или исчезать, но все это ломается, когда я пытаюсь просто перекреститься и заменить. Я пробовал общаться с абсолютным/относительным позиционированием, но безрезультатно.

Пробовал это с помощью коммутатора, но не смог использовать $index в состоянии коммутатора, поэтому я мог загружать изображения во время выполнения. Это большое требование здесь.

FYI - это использование angular 1.1.5

Спасибо!!! Адам

Ответы

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

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