aframe - 1 つのアニメーションで複数のエンティティの不透明度を設定してアニメーション化できますか?

Question

私は次のようにセットアップしたいいくつかの平面を持つエンティティを持っています:

<a-entity id="ui" opacity="0" position="0 -10 0">
  <a-plane class="menu-pane" position="0 0 -60" opacity="0" color="blue" rotation="0 0 0" height="50" width="30"></a-plane>
  <a-plane class="menu-pane" position="50 0 -40" opacity="0" color="blue" rotation="0 -50 0" height="50" width="30"></a-plane>
  <a-plane class="menu-pane" position="-50 0 -40" opacity="0" color="blue" rotation="0 50 0" height="50" width="30"></a-plane>
  <a-animation begin="mobileMenuOpen"  attribute="position" dur="550" fill="both" to="0 0 0"></a-animation>
  <a-animation begin="mobileMenuOpen"  attribute="opacity"  dur="550" fill="both" to="1"></a-animation>
</a-entity>

そのため、mobileMenuOpenイベントを発生さ#uiせて、エンティティとそのすべての平面をフェードインさせ、上に移動させることができます。ただし、opacity="0"on#uiは子要素には影響しません。また、アニメーションにも影響するかどうかはわかりません。どうすれば目的の効果を達成できますか?