Question

我正在尝试将幻灯片转换为全屏，如下所示：http://alexfuhr.me/polymer-talk/（此触发器点击右上角的按钮）

过渡到全屏工作正常，但转换回内联视图会导致全屏幻灯片突然落在脚手架下方。我试图将z-index更改为高数字来纠正这个问题，但似乎没有任何效果。有谁知道如何解决这个转变？主要代码在这里：https://github.com/afuhrtrumpet/afuhrtrumpet.github.io/blob/master/polymer-talk/index.html

Answer 1

以下方法可以提供更好的解决方案，而不是使用z-index来覆盖彼此重叠的元素，而不是以下方法。

我们的想法是通过将core-drawer-panel属性设置为隐藏 core-scaffold的抽屉（narrow内）在前进动画开始之前true，然后在后动画开始之前恢复该值。

此外，只有在屏幕上显示抽屉时才会出现此问题。因此，当页面不处于狭窄模式时，我们只需要订阅core-animated-pages-transition-prepare事件。

以下内容应该有效。我个人更喜欢这个，因为它也能平滑地动画抽屉面板的进/出，表明fullscreen-list占据了整个屏幕空间。

<script>
    var isBackAnimation = false;
    var pages = document.querySelector("#mainPages");
    var fab = document.querySelector("#fullscreen-button");

    var switchPages = function () {
        isBackAnimation = pages.selected == 0;
        pages.selected = pages.selected == 0 ? 1 : 0;
        fab.icon = pages.selected == 1 ? "unfold-less" : "unfold-more";
    }

    window.addEventListener('polymer-ready', function () {
        // locate the core-drawer-panel inside the core-scaffold
        var drawerPanel = document.querySelector('core-scaffold::shadow #drawerPanel');

        // on loaded, listen to this event only when it's not in narrow mode
        if (!drawerPanel.narrow) {
            pages.addEventListener('core-animated-pages-transition-prepare', beforeAnimation);
        }

        drawerPanel.addEventListener('core-responsive-change', function (event) {
            // in narrow mode, the animations work fine, so we remove the handlers
            if (event.detail.narrow) {
                pages.removeEventListener('core-animated-pages-transition-prepare', beforeAnimation);
            }
            // otherwise we add the handlers
            else {
                pages.addEventListener('core-animated-pages-transition-prepare', beforeAnimation);

                // when the page was initially in narrow mode and then got resized up, we 
                // need to manually reset the narrow attribute at the end of the animation
                if (isBackAnimation) {
                    pages.addEventListener('core-animated-pages-transition-end', afterAnimation);
                }
            }
        });

        function beforeAnimation() {
            drawerPanel.narrow = !drawerPanel.narrow;
        }

        function afterAnimation() {
            drawerPanel.narrow = !drawerPanel.narrow;

            // this is a once off thing, so unsubscribe it here
            pages.removeEventListener('core-animated-pages-transition-end', afterAnimation);
        }
    });
</script>

聚合物英雄过渡的Z指数

1 个答案: