使用ng重复，一次制作一个动画

Animate one at a time with ng-repeat

本文关键字：动画 一个 ng 重复 使用 一次      更新时间：2023-09-26

我正在尝试使用ngRepeat加载图像并播放其相关色调，然后将图像从圆心移动到圆上的特定位置，并对下一个图像执行相同的操作。我使用ng-enter-stagger逐个显示和移动图像，但是图像的位置不同，所以当我将其更改为每次重复使用不同的类时，ng-enter-stagger不起作用。

如何加载一个图像，将其移动到适当的位置，隐藏图像，然后继续下一个图像？

我已经创建了一个plunkr，但动画在其中不起作用https://plnkr.co/edit/DddST6JsemsCKKf3mQ6N?p=preview.我想做的一个例子是这个的"学习声音"部分(http://www.absolutepitchstudy.com/animalgame/)单击"启动控制"或"启动动物游戏"

数据如下：

"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页面：

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

我的CSS（我可能可以修复这个问题，使其没有那么多类，只是不确定如何修复）

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

有几个错误需要查看第一，要从有角度的项目中获得类的值，您应该查找的是ng类：

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

然后在样式表中，CSS似乎有问题，所以我删除了一个没有使用的类：

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

尽管为了隐藏东西，你可能想把它拿回来。到目前为止，这项工作的最新进展是：

庞克

现在它被呈现在正确的位置，您可以使用$timeout、ng-click或其他方法来更改模型中的类定义。图形的位置应自动更新。

你打算用什么方法？

相关文章：