如果 core-scroll-header-panel 被压缩，如何隐藏标题元素？答案

【问题标题】：How to hide header elements if core-scroll-header-panel is condensed?如果 core-scroll-header-panel 被压缩，如何隐藏标题元素？
【发布时间】：2014-12-20 14:48:18
【问题描述】：

我的页面看起来非常类似于：https://www.polymer-project.org/components/core-scroll-header-panel/demo.html。唯一的区别是我的页面设置了 keepCondensedHeader 标志。

我现在想做什么（如果可能的话）：如果标题是压缩的，则隐藏标题（或压缩标题中显示的任何元素）。

任何指针将不胜感激。

【问题讨论】：

看来condenses属性只体现在css属性transform和opacity中。这使得为处于压缩状态的标头创建适当的选择器非常困难，如果不是不可能的话。您可能需要修改源代码，例如，在完全压缩后向 core-toolbar 或 .core-header 元素添加一个类。编辑：您还可以收听core-header-transform 事件，检查标题高度是否等于condensedHeaderHeight，然后隐藏您的元素。
@idleherb，您编辑的答案非常接近 - 除了标题高度始终保持不变之外，更改的是 y。 :)

标签： polymer

【解决方案1】：

实际上，演示文件中的 javascript 很好地暗示了如何轻松完成类似的事情。

我在这里复制了整个 html 和 js，另外两行在标题压缩时隐藏了标题。

之所以我把 ~~128~~ m 作为 翻译 Y 是因为最大标题高度是 ~~192~~ d.height，浓缩高度为~~64~~ d.condensedHeight。当头部被压缩时，它在 y 轴上移动 ~~128~~ m (~~192 - 64~~ d.height - d.condensedHeight) 的距离。

<body unresolved>
    <core-scroll-header-panel condenses keepcondensedheader>
        <core-toolbar class="tall">
            <core-icon-button icon="arrow-back"></core-icon-button>
            <div flex></div>
            <core-icon-button icon="search"></core-icon-button>
            <core-icon-button icon="more-vert"></core-icon-button>
            <div class="bottom indent title">Title</div>
        </core-toolbar>
        <div class="content">
            <sample-content size="100"></sample-content>
        </div>
    </core-scroll-header-panel>
    <script>
        // custom transformation: scale header's title
        var titleStyle = document.querySelector('.title').style;
        // added code - here we need to obtain the title div as well
        var title = document.querySelector('.title');

        addEventListener('core-header-transform', function (e) {
            var d = e.detail;
            var m = d.height - d.condensedHeight;
            var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);
            titleStyle.transform = titleStyle.webkitTransform =
                'scale(' + scale + ') translateZ(0)';

            // added code - here we hide the title when the header is condensed
            title.hidden = d.y == m;
        });

    </script>
</body>

希望这会有所帮助！

更新

实际上，现在我想，为title 的opacity 设置动画而不是显示/隐藏它可能是一个更好的主意。它将提供更好的用户体验以及core-scroll-header-panel 的平滑滚动和褪色背景！

感谢core-animation，它非常简单。

首先我们需要包含这个引用。

<link rel="import" href="../core-animation/core-animation.html">

然后是淡入淡出动画的定义。

<body unresolved>
    <!--define the opacity animations-->
    <core-animation id="out" fill="forwards" duration="400">
        <core-animation-keyframe>
            <core-animation-prop name="opacity" value="1"></core-animation-prop>
        </core-animation-keyframe>
        <core-animation-keyframe>
            <core-animation-prop name="opacity" value="0"></core-animation-prop>
        </core-animation-keyframe>
    </core-animation>
    <core-animation id="in" fill="forwards" duration="400">
        <core-animation-keyframe>
            <core-animation-prop name="opacity" value="0"></core-animation-prop>
        </core-animation-keyframe>
        <core-animation-keyframe>
            <core-animation-prop name="opacity" value="1"></core-animation-prop>
        </core-animation-keyframe>
    </core-animation>

最后，我们在 core-header-transform 处理程序中调用它们。

// animation variables
var fadeIn, fadeOut;
// create a local bool to ensure the 'fade in' animation is only called once
var condensed = false;

// retrieve the animations and set their targets
addEventListener('polymer-ready', function (e) {
    fadeOut = document.getElementById('out');
    fadeOut.target = title;

    fadeIn = document.getElementById('in');
    fadeIn.target = title;
});

addEventListener('core-header-transform', function (e) {
    var d = e.detail;
    var m = d.height - d.condensedHeight;
    var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);
    titleStyle.transform = titleStyle.webkitTransform =
        'scale(' + scale + ') translateZ(0)';

    // when the header is condensed, we fade it out
    if (d.y == m) {
        condensed = true;
        fadeOut.play();
    }
    // otherwise, we fade it back in
    else {
        if (condensed) {
            condensed = false;
            fadeIn.play();
        }
    }
});

【讨论】：

这帮助很大。现在我有点尴尬，我自己没看到。可能是在森林里看太久，再也看不到树的情况了。非常感谢 Gibbs-Headslap。 :)
这是一个通用的解决方案：title.hidden = (d.y == m);
哦，现在我很尴尬！变量在那里，但我选择忽略它。 :) 我会更新答案。
啊，我在示例项目中得到了它，但忘记复制那部分，让我重新添加。
这是另一种选择。我实际上正在考虑创建一个动画组，该组还可以为标题的平移 y 设置动画。想象一下，当它淡出时，它也在飞升一点；当它褪色时，它从顶部落下。也许值得研究。