CSS变量对JS交互组件开发带来的提升与变革示例代码详解

网页制作 2024/11/16 佚名

3 1 2

一、CSS变量带来的质变

CSS变量带来的提升绝不仅仅是节约点CSS代码，以及降低CSS开发和维护成本。

更重要的是，把组件中众多的交互开发从原来的JS转移到了CSS代码中，让组件代码更简洁，同时让视觉表现实现更加灵活了。

我们通过几个案例来说明这一变化。

二、简化了JS对DOM设置的介入

案例1：loading进度效果

例如实现下图所示的变量效果：

外面有一层背景层，然后里面有进度条，还有进度值。

在过去，会使用两层div元素，然后JS去改变里面有颜色条条的宽度，同时设置进度值。

也就是，loading的进度效果和进度值全部都是JS直接设置的，JS同时对应多个HTML信息。

现在，有了CSS变量，JS所做的工作就非常简单，仅仅在容器元素上设置loading进度值即可，其他什么都不需要做，至于样式表现，或者进度值如何显示，全部都是CSS的事情。

相关代码如下：

<label>图片1：</label>
<div class="bar" style="--percent: 60;"></div>
<label>图片2：</label>
<div class="bar" style="--percent: 40;"></div>
<label>图片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) '%\2002';
    width: calc(1% * var(--percent));
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

可以看到，我们只需要一层div标签，DOM层级简单了，然后，需要修改的HTML变化项仅仅是一个 --percent 自定义属性而已。

眼见为实，您可以狠狠地点击这里： CSS百分比变量与进度条demo

三、CSS变量成为了CSS API接口

过去点击出现提示，切换等效果都需要JS针对特定的元素进行样式设置，现在有了CSS变量，我们只需要一段通用的非常简单的全局JS就可以了，JS就可以自己玩耍去了，其他效果，全部交给JS处理。

这段JS如下：

/**
 * @author zhangxinxu(.com)
 * @description 点击页面任意位置，标记坐标位置
 */
document.addEventListener('mousedown', function (event) {
    var target = event.target;
    var body = document.body;
    var html = document.documentElement;

    // 设置自定义属性值
    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);
});

可以看到，JavaScript代码再也不负责任何与交互行为相关的逻辑，直接变成了工具人，一个单纯地传递点击坐标位置，以及点击元素偏移和尺寸信息的工具人。

CSS得到了什么呢？

得到了一个巨大的宝藏，一个随时可以拿来使用的宝藏。

我想要点击按钮的时候有什么花哨的反馈，或者点击页面空白也来个创意的交互提示，完全不成问题，随用随取，无比方便，无比自由。

可以说，上面这段JS，或者类似的JS代码是未来web开发的标配。

我们来看看上面的代码可以实现怎样的效果。

案例2：按钮点击圈圈效果

点击按钮的时候有个圈圈放大的效果，圈圈放大的中心点就是点击的位置。

效果如下GIF所示：

核心CSS代码如下：

.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;
}

:active 时候隐藏，同时设置过渡时间为0。于是，点击释放的时候，就会有过渡效果。

大家可以访问这个地址进行体验： https://xy-ui.codelabo.cn/docs/#/xy-button

案例3：点击页面出现文字效果

又例如，点击本文页面任意位置都会出现下图所示的提示信息。

就是下面上面那段万能工具人JS加下面这段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;
}

案例3：两个按钮下划线滑来滑去效果

以前，下图这种点击选项卡按钮，然后下划线滑来滑去，尺寸还变化效果，使用纯CSS实现很考验功力，几乎99.99%的开发都是借助JS去查询对应DOM元素，然后设置宽高和位置实现的交互效果。

现在，有了工具人JS，只需要一段CSS就可以搞定了，甚至文字的高亮切换都可以纯CSS搞定，就是这么神奇。

下面这里的效果就是实现的实时效果（若没有效果，请访问原文张鑫旭 https://www.zhangxinxu.com/wordpress/?p=9477 ）：

点击任意的选项卡元素，就可以看到下划线滑到对应位置，同时为高亮的效果。

相关代码如下：

<div class="yw-tab-tab"> 
  <a href="javascript:" class="yw-tab-a">QQ阅读</a>
  <a href="javascript:" class="yw-tab-a">起点读书</a>
  <a href="javascript:" class="yw-tab-a">红袖读书</a>
  <a href="javascript:" class="yw-tab-a">飞读免费小说</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;
}

如果是移动端访问，需要 mousedown 事件修改成 touchstart ，我就懒得调整了。

四、web组件的很多API接口可以拜拜了

以前web组件有一个什么功能，就新增一个API接口，看上去很厉害，实际上，加着加着，API越来越多，组件也越来越重，学习成本也越来越高，最后走向了死胡同，变得笨重，迎来了灭亡。

现在，可以改变思路了。

那些与交互表现密切相关的功能，事实上仅仅在组件容器元素上传递CSS自定义属性就可以了，无需负责具体的定位，显隐，或者样式变化，全部交给CSS。

因为设计表现的东西是上层的，灵活的，个性的，应该在CSS层面进行驾驭才是合理的，匹配的。

例如上面提到的loading组件，无论是条状的还是饼状的都是这样的处理逻辑，只负责传递进度值，样式无需关心。

又例如滑条框（如下图Ant Design中的滑条的位置和提示效果）、popup提示框等都可以通过一个CSS自定义属性完成，JS仅传参不负责UI样式。

实在太晚了，已经0:56了，我就不出demo演示了，大家领会去精神即可。

五、结语

结语个鬼大头啊，眼睛都睁不开了。

总之，交互开发实现的思路可以发展转变了，CSS变量，真香！

感谢阅读，欢迎分享！

然后行文匆忙，迷迷糊糊下码的字，如有错误，欢迎指正。

本文地址： https://www.zhangxinxu.com/wordpress/?p=9477

css,变量,js交互组件

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“CSS变量对JS交互组件开发带来的提升与变革示例代码详解”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

CSS变量对JS交互组件开发带来的提升与变革示例代码详解

css布局两个button在同父标签中左右两侧分布的方法

完美解决webpack打包css背景图片路径问题

评论“CSS变量对JS交互组件开发带来的提升与变革示例代码详解”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

CSS变量对JS交互组件开发带来的提升与变革示例代码详解

css布局两个button在同父标签中左右两侧分布的方法

完美解决webpack打包css背景图片路径问题

评论“CSS变量对JS交互组件开发带来的提升与变革示例代码详解”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存