Question

我正在尝试使用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);
}

Answer 1

要看第一个有几个错误，要从角项中获取一个类的值，它应该是你应该寻找的ng-class：

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

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

(function($) {
    function2() {
        console.log("main func: " + g_var);
    }
}(jQuery));

虽然要隐藏你可能想要的东西。到目前为止，最新的工作是：

plunky

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

你打算用什么方法？

使用ng-repeat一次动画一个

1 个答案: