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

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

Ответ 1

У вас на самом деле все правильно! Вам просто не хватает CSS.

Я установил ваш jsfiddle с нужным материалом (тире позиции относительным и абсолютным и максимальным ростом), и он работает как шарм.

Основная масса нового материала:

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

С классами, применяемыми в вашем HTML-формате по мере необходимости.

Проверьте это: http://jsfiddle.net/QErPe/2/

Надеюсь, что это поможет!

Ответ 2

Похоже, что это скорее проблема CSS, чем проблема с angular. Вам нужно расположить два div друг на друга и убедиться, что они фактически занимают одно и то же пространство одновременно. После этого кросс-замирание должно быть куском пирога.

Ответ 3

Вы также можете сделать простой CSS3 в классе .ng-hide. Например:

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

Итак, теперь, когда добавляется класс ng-hide, он будет исчезать непрозрачность изображения. ngAnimate имеет место, но с простым CSS3 в классе .ng-hide вы можете устранить разочарования.