トグル・フレームとDOMの可視性

Question

Iは、フレームのVRモードを切り替えながら、いくつかのHTMLブロックを隠し、表示したいと思い：

// Enter VR Mode and hide some DOMs 
// opaicty: 0 is applied by .lightOff 
AFRAME.registerComponent('entering-vr', 
{ 
    schema: 
    { 
     type: 'selector' 
    }, 

    init: function() 
    { 
     var enterButton = document.querySelector('.a-enter-vr-button'); 

     enterButton.addEventListener('click', function() 
     { 
      document.querySelector('.site-header').classList.add('lightOff'); 
      document.querySelector('.featuredImage').classList.add('lightOff'); 
     }) 
    } 
}); 


// Exit VR Mode and restore visibility 
AFRAME.registerComponent('exting-vr', 
{ 
    schema: 
    { 
     type: 'selector' 
    }, 

    init: function() 
    { 
     function removeLightOff() 
     { 
      document.querySelector('.site-header').classList.remove('lightOff'); 
      document.querySelector('.featuredImage').classList.remove('lightOff'); 
     } 

     // On Clicking [X] Button in Mobile 
     var exitButton = document.querySelector('.a-orientation-modal button'); 
     exitButton.addEventListener('click', removeLightOff()); 
     // On Exiting Fullscreen in Desktop 
     if (document.addEventListener) 
     { 
      document.addEventListener('webkitfullscreenchange', exitHandler, false); 
      document.addEventListener('mozfullscreenchange', exitHandler, false); 
      document.addEventListener('fullscreenchange', exitHandler, false); 
      document.addEventListener('MSFullscreenChange', exitHandler, false); 
     } 
     function exitHandler() 
     { 
      if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) 
      { 
       removeLightOff(); 
      } 
     } 
    } 
}); 

それはデスクトップブラウザでかなりよく働きました。ただし、モバイルデバイスでは必ずしも機能しませんでした。 「時々」.site-headerと.featuredImageに.LightOffを追加しました。 .a-orientation-modalのXボタンをクリックすると、.LightOffは決して削除されません。

トグルを常にモバイルデバイスで使用できるようにするにはどうすればよいですか？ ありがとう！

Answer 1

ドンが言及したように、enter-vr/exit-vrイベントを使用してみてください。