Toggle the visibility of DOM with A-Frame

Question

I would like to hide and show some HTML blocks while toggling A-Frame's VR Mode:

// 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();
            }
        }
    }
});

It worked pretty well in Desktop browsers. However, it didn't always work in mobile devices. "Sometimes" it added .LightOff to .site-header and .featuredImage. Clicking X button in .a-orientation-modal never remove .LightOff.

How do I make toggling always work in mobile devices? Thanks!

Answer 1

As Don mentioned, try using enter-vr / exit-vr events.