Question

我想在切换A-Frame的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();
            }
        }
    }
});

它在桌面浏览器中运行良好。但是，它并不总是适用于移动设备。 “有时候”它添加了.LightOff到.site-header和.featuredImage。单击.a-orientation-modal中的X按钮永远不会删除.LightOff。

如何使切换始终在移动设备中工作？谢谢！

Answer 1

如Don提到的那样，请尝试使用enter-vr / exit-vr个事件。

使用A-Frame切换DOM的可见性

1 个答案: