Z索引上的聚合物英雄过渡

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>