CODEWITHSUNDEEP
javascriptjquerycssangularjsng-animate
Eitan K
Eitan K

Reputation: 837

Animate one at a time with ng-repeat

I am trying to use ngRepeat to load an image and play it's associated tone, then move the image from the center of the circle to a specific position on a circle, and proceed with the doing the same thing with the next image. I got the images to display and move one by one using ng-enter-stagger, however the images have different positions so when I change it to to use a different class for each repetition, ng-enter-stagger does not work.

How can I go about loading one image, moving it to the proper position, hiding the image, then proceeding with the next image?

I have created a plunkr but the animation does not work in it https://plnkr.co/edit/DddST6JsemsCKKf3mQ6N?p=preview. An example of what I want to do is the Learn the sounds part of this (http://www.absolutepitchstudy.com/animalgame/) click either Start Control or Start Animal Game

The data looks like this: 

"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 page:

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

My CSS (I may be able to fix this to not have as many classes, just am unsure how)

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

Upvotes: 0

Views: 384

Answers (1)

PeterS
PeterS

Reputation: 2954

There's a couple of errors to look at 1st, To get a value of a class from an angular item, it's ng-class you should be looking for:

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

Then in you style sheet there seems to be something wrong with the CSS, so I removed a class that wasn't being used:

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

Although to hide stuff you may want that back. The updated plunk with the work so far is at:

plunky

Now it's being rendered in the right place, you can use $timeout, ng-click or someother method to alter the class definition in your model. The position of the graphic should automatically update.

What method were you going to use?

Upvotes: 1

Related Questions