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()上的元素。