web-dev-qa-db-fra.com

AngularJS ng-show animation fondu à l'intérieur de ng-repeat

Simple (mais pas pour moi!) Angularjs montrer/cacher le problème d'animation.

J'ai cherché haut et bas mais je n'ai pas trouvé la solution à ce problème spécifique , qui peut peut-être être mieux expliqué par un exemple et un "défi".

Tout d'abord, l'exemple: http://jsfiddle.net/adammontanaro/QErPe/1/

Le défi: n'importe qui peut-il faire en sorte que ces images apparaissent et disparaissent sur les unes aux autres, plutôt que d'apparaître ci-dessous ou ci-dessus l'image affichée, puis se met en place une fois le div de l'image supérieure est caché?

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

Je fais tourner mes roues là-dessus depuis des heures. J'ai vu des tas de bons articles démontrant comment faire apparaître ou disparaître une seule image ou une image div, mais tout s'effondre lorsque j'essaie de procéder à un fondu enchaîné et de le remplacer. J'ai essayé de jouer avec le positionnement absolu/relatif, mais en vain.

J'ai essayé avec un commutateur, mais je n'ai pas pu utiliser $ index dans l'état du commutateur, ce qui m'a permis de charger mes images au moment de l'exécution. C'est une grande exigence ici.

FYI - cela utilise angulaire 1.1.5

Je vous remercie!!! Adam

javascriptcssangularjsng-animateng-show
11
Adam Montanaro

En fait, tout est correct! Vous manquez juste un peu de CSS.

J'ai arrangé ton jsfiddle avec le bon matos (un trait de position relative et absolue et une pincée de hauteur) et cela fonctionne à merveille.

Le gros des nouveautés est:

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

Avec les classes appliquées dans votre code HTML selon vos besoins.

Découvrez-le: http://jsfiddle.net/QErPe/2/

J'espère que cela pourra aider!

7
betaorbust

Cela semble en réalité être plus un problème CSS qu'un problème angulaire. Vous devez positionner les deux divs l'un sur l'autre et vous assurer qu'ils occupent le même espace au même moment. Après cela, le fondu enchaîné devrait être un morceau de gâteau.

0
Fourth

Vous pouvez également faire du CSS3 en clair sur la classe .ng-hide. Par exemple:

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

Alors maintenant, lorsque la classe ng-hide est ajoutée, elle atténuera l'opacité de l'image. ngAnimate a sa place, mais avec CSS3 simple sur la classe .ng-hide, vous pouvez éliminer les frustrations.

0
WebDevJ