Animiere eins nach dem anderen mit ng-repeat

Question

Ich versuche ngRepeat zu verwenden, um ein Bild zu laden und den zugehörigen Ton zu spielen, dann bewege das Bild von der Mitte des Kreises zu einer bestimmten Position auf einem Kreis und fahre mit dem fort das gleiche mit dem nächsten Bild machen. Ich habe die Bilder einzeln angezeigt und bewegt sich mit ng-enter-stagger, aber die Bilder haben unterschiedliche Positionen, so, wenn ich es ändern, um eine andere Klasse für jede Wiederholung zu verwenden, funktioniert ng-enter-stagger nicht.

Wie kann ich ein Bild laden, es an die richtige Position bringen, das Bild ausblenden und mit dem nächsten Bild fortfahren?

Ich habe eine Plunkr erstellt, aber die Animation funktioniert nicht darin https://plnkr.co/edit/DddST6JsemsCKKf3mQ6N?p=preview. Ein Beispiel dafür, was ich tun möchte, das Lernen ist die Klänge Teil dieser (http://www.absolutepitchstudy.com/animalgame/) klicken Sie entweder Startsteuerung oder Start Tier Spiel

Die Daten sieht wie folgt aus:

"ImageTones":[{"CPosition":"deg60","Image":{"ImageFileName":"Alligator.png","ImageId":1},"Tone":{"ToneFileName":"C3.mp4","ToneId":1}}, 
{"CPosition":"deg0","Image":{"ImageFileName":"Cow.png","ImageId":4},"Tone":{"ToneFileName":"B5.mp4","ToneId":2}}, 
{"CPosition":"deg270","Image":{"ImageFileName":"Bird.png","ImageId":3},"Tone":{"ToneFileName":"E3.mp4","ToneId":3}}] 

HTML-Seite:

<div class="circle-container"> 
    <div ng-repeat="it in model.imageTones" class="it.CPosition"> 
     <img ng-src="../Content/Game/Animals/{{it.Image.ImageFileName}}"/> 
     <!--Audio tag goes here--> 
    </div> 
</div> 

Meine CSS (ich in der Lage sein, dies zu nicht so viele Klassen zu beheben, nur nicht sicher ist, wie)

.circle-container { 
    position: relative; 
    width: 38em; 
    height: 38em; 
    padding: 2.8em; 
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/ 
    border: dashed 1px; 
    border-radius: 80%; 
    margin: -5.25em auto 0; 
} 

.circle-container div { 
    display: block; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 4em; 
    height: 4em; 
    margin: -2em;   
} 

.circle-container div.ng-enter { 
    transition: 5s linear all; 
    opacity: 0;   
} 
.circle-container div.ng-enter-stagger { 
    /* this will have a 100ms delay between each successive leave animation */ 
    transition-delay: 5.0s; 

    /* As of 1.4.4, this must always be set: it signals ngAnimate 
    to not accidentally inherit a delay property from another CSS class */ 
    transition-duration: 0s; 
} 

.circle-container div.ng-enter.ng-enter-active { 
    /* standard transition styles */ 
    opacity:1; 
} 


.deg0.ng-enter-active { 
    transform: translate(19em); 
} 


.deg30.ng-enter-active { 
    transform: rotate(30deg) translate(19em) rotate(-30deg); 
} 


.deg60.ng-enter-active { 
    transform: rotate(60deg) translate(19em) rotate(-60deg); 
} 

.deg90.ng-enter-active { 
    transform: rotate(90deg) translate(19em) rotate(-90deg); 
    transition: transform 5s; 
} 

.deg120.ng-enter-active { 
    transform: rotate(120deg) translate(19em) rotate(-120deg); 
} 

.deg150.ng-enter-active { 
    transform: rotate(150deg) translate(19em) rotate(-150deg); 
} 

.deg180.ng-enter-active { 
    transform: rotate(180deg) translate(19em) rotate(-180deg); 
} 

.deg210.ng-enter-active { 
    transform: rotate(210deg) translate(19em) rotate(-210deg); 
} 

.deg240.ng-enter-active { 
    transform: rotate(240deg) translate(19em) rotate(-240deg); 
} 

.deg270.ng-enter-active { 
    transform: rotate(270deg) translate(19em) rotate(-270deg); 
} 

.deg300.ng-enter-active { 
    transform: rotate(300deg) translate(19em) rotate(-300deg); 
} 

.deg330.ng-enter-active { 
    transform: rotate(330deg) translate(19em) rotate(-330deg); 
} 

Answer 1

ein paar Fehler gibt es in dem 1. zu sehen, auf einen Wert von einer Klasse aus einem Winkeleinzelteil zu erhalten, es ng-Klasse, die Sie achten sollen:

<div ng-repeat="it in model.imageTones" ng-class="it.CPosition" ng-if="!it.hidden" > 
    <img ng-src="http://www.absolutepitchstudy.com/animalgame/content/images/{{it.Image.ImageFileName}}" /> 

    </div> 

Dann in ihrem Stil Blatt scheint es etwas falsch mit der CSS zu sein, so entfernte ich eine Klasse, die nicht verwendet wurde:

.deg60{ 
    transform: rotate(60deg) translate(19em) rotate(-60deg); 
} 

Obwohl Sachen verstecken Sie das zurück möchten. Die aktualisierte zupfen mit der Arbeit so weit ist:

plunky

Jetzt ist es an der richtigen Stelle gemacht zu werden, erhalten Sie $ Timeout verwenden können, ng-Klick oder someother Methode die Klassendefinition in Ihrem Modell zu ändern . Die Position der Grafik sollte automatisch aktualisiert werden.

Welche Methode würden Sie verwenden?