All geek questions in one place

How to hide title elements if the kernel scrollbar title bar is hidden?

My page is very similar to: https://www.polymer-project.org/components/core-scroll-header-panel/demo.html . The only difference is that the keepCondensedHeader flag is set on my page.

What I want to do now (if at all possible): Hide the title (or any of the elements shown in the compressed title) if the title is compressed.

Any pointers would be greatly appreciated.

+4
source share
1 answer

In fact, the javascript inside the demo file gives a very good hint on how something like this can be done easily.

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 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>

, !

, , , opacity title, / . core-scroll-header-panel !

core-animation .

.

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

fade in out.

<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();
        }
    }
});
+3

Source: https://habr.com/ru/post/1568455/

More articles:


All Articles