CSS variable brings improvement and change to JS interactive component development

Time:2021-2-23

1、 Qualitative changes brought by CSS variables

The improvement brought by CSS variables is not only to save CSS code, but also to reduce the cost of CSS development and maintenance.

More importantly, the interaction development of components is transferred from the original JS to the CSS code, which makes the component code more concise and the visual performance more flexible.

We use several cases to illustrate this change.

2、 It simplifies the intervention of JS in DOM setting

Case 1: loading schedule effect

For example, realize the variable effect shown in the figure below:

There is a background layer on the outside, and then there is a progress bar and progress value inside.

In the past, we used to use two layers of div elements, and then JS to change the width of the color bar inside, and set the progress value at the same time.

That is, the progress effect and progress value of loading are all set directly by JS, and JS corresponds to multiple HTML information at the same time.

Now, with CSS variables, the job of JS is very simple, just setting the loading progress value on the container element, and nothing else needs to be done. As for style representation, or how to display the progress value, it’s all about CSS.

The relevant codes are as follows:

< label > Picture 1: < / label >
<div class="bar" style="--percent: 60;"></div>
< label > Picture 2: < / label >
<div class="bar" style="--percent: 40;"></div>
< label > picture 3: < / label >
<div class="bar" style="--percent: 20;"></div>

.bar {
    height: 20px; width: 300px;
    background-color: #f5f5f5;
}
.bar::before {
    display: block;
    counter-reset: progress var(--percent);
    content: counter(progress) '%02';
    width: calc(1% * var(--percent));
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

As you can see, we only need one layer of div tags, and the DOM level is simple. Then, the HTML change item that needs to be modified is just one--percentIt’s just a custom property.

Seeing is believing. You can click here: CSS percentage variable and progress bar demo

3、 CSS variables become CSS API interfaces

In the past, clicking prompt, switching and other effects all required JS to set the style for specific elements. Now with CSS variables, we only need a general and very simple global JS. JS can play by itself. Other effects are all handled by JS.

The JS is as follows:

/**
 * @author zhangxinxu(.com)
 *@ description click any position on the page to mark the coordinate position
 */
document.addEventListener('mousedown', function (event) {
    var target = event.target;
    var body = document.body;
    var html = document.documentElement;

    //Set custom property values
    body.style.setProperty('--pagex', event.pageX);
    body.style.setProperty('--pagey', event.pageY);

    html.style.setProperty('--clientx', event.clientX);
    html.style.setProperty('--clienty', event.clientY);
    html.style.setProperty('--scrolly', window.pageYOffset);

    target.style.setProperty('--offsetx', event.offsetX);
    target.style.setProperty('--offsety', event.offsetY);
    target.parentElement.style.setProperty('--target-width', target.clientWidth);
    target.parentElement.style.setProperty('--target-height', target.clientHeight);
    target.parentElement.style.setProperty('--target-left', target.offsetLeft);
    target.parentElement.style.setProperty('--target-top', target.offsetTop);
});

It can be seen that JavaScript code is no longer responsible for any logic related to interaction behavior, but directly becomes a tool man, a tool man who simply transmits the click coordinate position, click element offset and size information.

What does CSS get?

Got a huge treasure, a treasure that can be used at any time.

I want to click on the button when there is any fancy feedback, or click on the page blank also to a creative interactive tips, no problem at all, as you use, very convenient, very free.

It can be said that the above JS or similar JS code is the standard configuration for future web development.

Let’s see what the above code can do.

Case 2: button click circle effect

When you click the button, there is a circle magnifying effect. The center point of circle magnifying is the click position.

The results are as follows

The core CSS code is as follows:


.btn:not([disabled]):active::after {
    transform: translate(-50%,-50%) scale(0);
    opacity: .3;
    transition: 0s;
}
.btn::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%; height: 100%;
    left: var(--x, 0); top: var(--y, 0);
    pointer-events: none;
    background: radial-gradient(circle, currentColor 10%, transparent 10.01%) no-repeat 50%;
    transform: translate(-50%,-50%) scale(10);
    opacity: 0;
    transition: transform .3s, opacity .8s;
}

:activeTime to hide, and set the transition time to 0. So, when you click release, there will be a transition effect.

You can visit this address to experience: https://xy-ui.codelabo.cn/docs/#/xy -button

Case 3: click the page to display the text effect

For another example, click anywhere on the page of this article, and the prompt information shown in the figure below will appear.

This is the implementation of JS plus CSS


body:active::after {
    transform: translate(-50%, -100%);
    opacity: 0.5;
    transition: 0s;
    left: -999px;
}
body::after {
    content: 'zhangxinxu.com';
    position:fixed;
    z-index: 999;
    left: calc(var(--clientx, -999) * 1px);
    top: calc(var(--clienty, -999) * 1px);
    transform: translate(-50%, calc(-100% - 20px));
    opacity: 0;
    transition: transform .3s, opacity .5s;
}

Case 3: the effect of two buttons sliding back and forth

In the past, click the tab button as shown in the figure below, and then the underline will slide back and forth, and the size will also change. Using pure CSS to achieve this effect is very challenging. Almost 99.99% of the development uses JS to query the corresponding DOM elements, and then set the width, height and position to achieve the interactive effect.

Now, with the tool JS, you only need a section of CSS to do it, and even the text highlight switching can be done with pure CSS, which is so amazing.

The effect here is the real-time effect (if there is no effect, please visit the original Zhang Xinxu https://www.zhangxinxu.com/wordpress/?p=9477 ):

Click any tab element, you can see the underline slide to the corresponding position, at the same time for the highlight effect.

The relevant codes are as follows:

<div class="yw-tab-tab"> 
  < a = "javascript:" class = "yw-tab-a" > QQ reading</a>
  < a = "javascript:" class = "yw-tab-a" > start reading</a>
  < a = "javascript:" class = "yw-tab-a" > red sleeve reading</a>
  < a = "javascript:" class = "yw-tab-a" > fly to read free novels</a>
</div>

.yw-tab-tab {
    position: relative;
    display: flex;
    max-width: 414px;
    justify-content: space-between;
    border-bottom: 1px solid #717678;
    background-color: #fff;
    margin: 30px auto;
}
.yw-tab-tab::before,
.yw-tab-tab::after {
    position: absolute;
    width: calc(var(--target-width, 0) * 1px);
    left: calc(var(--target-left, -299) * 1px);
    color: #2a80eb;
}
.yw-tab-tab[style]::before,
.yw-tab-tab[style]::after  {
    content: '';
}
.yw-tab-tab::before {
    background-color: currentColor;
    height: calc(var(--target-height) * 1px);
    mix-blend-mode: overlay;
}
.yw-tab-tab::after {
    border-bottom: solid;    
    bottom: -2px;
    transition: left .2s, width .2s;
}
.yw-tab-a {
    color: #717678;
    padding: 10px 0;
}

For mobile access, you need tomousedownEvent totouchstartI’m too lazy to adjust.

4、 Many API interfaces of web components can be seen

In the past, a new API interface was added to a web component for any function. It seemed very powerful. In fact, with the addition, there were more and more APIs, components became heavier and heavier, and the cost of learning became higher and higher. Finally, it went to a dead end, became cumbersome, and ushered in its demise.

Now, you can change your mind.

Those functions closely related to interaction performance, in fact, can only pass CSS custom attributes on component container elements, without being responsible for specific positioning, explicit and implicit, or style changes, all of which are handed over to CSS.

Because the design performance of things is the upper level, flexible, personalized, should be controlled in the CSS level is reasonable, matching.

For example, the loading component mentioned above, whether it is a bar or a pie, is the same processing logic. It is only responsible for passing the progress value, and the style does not need to be concerned.

For example, the slider box (such as the position and prompt effect of the slider in Ant Design in the figure below) and pop prompt box can be completed through a CSS custom attribute. JS only transfers parameters, not UI styles.

It’s too late. It’s already 0:56. I won’t give a demo. You can understand the spirit.

5、 Conclusion

Conclusion I can’t open my eyes.

In short, the idea of interactive development can be changed, CSS variables, really fragrant!

Thank you for reading, welcome to share!

Then the writing is in a hurry, and the words under the code are vague. If there are any mistakes, please correct them.

Address: https://www.zhangxinxu.com/wordpress/?p=9477

So far, this article about CSS variable to JS interactive component development brings improvement and change, sample code detailed explanation of this article, more relevant CSS variable JS interactive component content, please search the previous article of developer or continue to browse the following related articles, hope you can support developer more in the future!