css – 使ionic2 app完全透明的最佳方法？

我最近遇到了一个名为cordova-plugin-qrscanner( https://github.com/bitpay/cordova-plugin-qrscanner)的相当新的cordova插件.我以前一直在使用其他QR扫描仪,但这些只是覆盖某种原生相机UI,直到QR被扫描,然后返回到应用程序.

但是,这个插件的方法有点不同.实际上,相机显示在您的应用程序“后面”,您必须使所有内容都透明才能看到它.

这非常有趣,因为您可以使用HTML和CSS轻松添加自定义叠加层.但是,我不太清楚这里最好的方法是什么.

添加插件后,只需调用QRScanner.scan(displayContents);你看不到任何东西,但扫描仪已经在后台运行.然后,我从应用程序中递归删除任何样式(请参阅simplest way to remove all the styles in a page),并将background-color设置为透明,以查看它是否有效.它确实如此,但我显然仍然可以看到之前显示的文本.

我想我可以在其上创建并推送带有叠加层的新页面,将背景颜色设置为透明,然后在扫描代码后导航回来.但这感觉非常黑客.

有人有更好的解决方案吗？
例如,有没有办法用覆盖层“交换”应用程序的整个可见部分,并在扫描代码后恢复状态？

谢谢你的帮助.

编辑：

它不是同一个插件,但这篇文章与我的问题相关.

http://www.joshmorony.com/ionic-go-create-a-pokemon-go-style-interface-in-ionic-2/

应用css样式有效,但同样,应用程序的其余部分不可用.

解决方法

@Andreas我几周前遇到了一些问题.以下是我修复它的方法：

1)首先,在你的theme / variables.scss上创建一个名为lowOpacity的类,它必须是全局的,如果你在页面的scss中创建它,动态添加它将不起作用：

.lowOpacity {
  opacity: 0;
}

2)当您显示qrScanner时,您应该将该类应用于ion-app元素,并可选择注册后退按钮操作：

this.qrScanner.show().then(()=>{
                let unregister = this.platform.registerBackButtonAction(()=>{
                    this.closeQrScanner();
                    unregister();
                });
                window.document.querySelector('ion-app').classList.add('lowOpacity');
            });

3)记住在qrScanner扫描已关闭的内容后删除该类：

closeQrScanner() {
    this.qrScanner.hide().then(()=>{
        window.document.querySelector('ion-app').classList.remove('lowOpacity');
    }); // hide camera preview
}

ngOnDestroy() {
    this.closeQrScanner();
}

希望能帮助到你