A-frame fadeOut primitives

Question

我有一个框架的麻烦。 在这里如何从延迟的场景中删除一个组件或基元？像fadeOut在jQuery中？

我应该检查每个滴答的opacity CSS属性或特殊的className或者像那样的吗？

如果我想淡出原始ng-repeat，我应该使用ng-animate并检查.ng-leave类吗？

理想情况下，我想在我的组件或原语的remove()函数中声明algorythm。例如，如果我在remove（）函数中返回一个Promise，则在promise解析中删除Object3D。但是，这实现不能以这种方式，我已经卡住了:(

看看例子：http://codepen.io/Disorrder/pen/BWBKpb

Answer 1

http://codepen.io/jdoyle/pen/aJoVJj

据我所知道的，不透明的CSS属性会对对象没有影响因为这个原因，我认为你不能使用.ng-leave。动画不透明度的唯一方法是通过动画组件或编程方式。

使用$timeout提供程序，并知道动画持续时间，你可以设置一些事情g up像这样：

<a-box ng-repeat="box in page.getActiveBoxes() track by box.id" 
     ng-class="{animated: page.animate}" 
     position="{{box.position}}" 
     rotation="0 45 0" 
     width="0.6" height="1" depth="0.6" 
     color="{{box.color}}" 
    > 
    <a-animation attribute="opacity" begin="fadeOut" duration="5000" to="0"></a-animation> 
</a-box> 

fadeOut() { 
    var id = this.getRandomInt(0, this.boxes.length-1); 
    document.querySelector('#box-' + id).emit('fadeOut'); 
    this.$timeout(function() { 
    // you can now delete the primitive 
    }, 5000 + 50); // added 50ms for good measure 
} 

getRandomInt(min, max) { 
    min = Math.ceil(min); 
    max = Math.floor(max); 
    return Math.floor(Math.random() * (max - min)) + min; 
} 

这不是最优雅的解决方案，但我真的不能想到另一种方式。

另一个令人失望的情况是角度插值不适用于动画的持续时间属性。持续时间一旦设定，不能改变。这是行不通的：

<a-animation attribute="opacity" duration="{{page.animationDuration}}" begin="fadeOut" to="0"></a-animation> 

Answer 2

我可能会感到困惑，你是否试图将其删除或只是从视图中淡出它？您可以考虑使用带A帧的内置Animations。这里的例子：https://aframe.io/docs/0.5.0/core/animations.html#begin

这不会删除它，但jQuery（根据你的第二个问题）不会删除fadeOut()上的元素。