基于active状态类名的web交互开发

demo：

默认是这样的：

当我们点击更多按钮后，会以CSS3动画的方式展开剩余所有文字信息，如下动图：

下面我们看下关键的CSS代码，这个.active是如何自身无样式的：

.box {

    max-height: 80px;

    transition: max-height .25s;

    overflow: hidden;

}

.box.active {

    max-height: 200px;

}

.active > .more {

    display: none;

}

more.onclick = function () {

    box.className = box.className + ' active';

};

可以看到，当我们点击按钮后，盒子变高，以及更多元素隐藏，全部都是通过和.active发生关系后发生的，而不是.active自己的样式。例如，我们盒子实现的200px以内任意高度的动画效果，是通过.box.active组合类名触发的，

用中文解释就是.box元素同时有.active状态的时候，样式如何如何…

同样，.active > .more表示，当我的爸爸状态为.active的时候，我隐藏。

实现了真正意义上的样式和行为分离！

优点：

.active本质上扮演的角色不是类名样式，而是一个标识符！

省了很多想命名的脑细胞

妈妈再也不要担心有些单词不知道怎么翻译啦~~
CSS和JS代码可读性更强了
一旦在CSS或JS中看到'.active'，大家都知道，页面这块内容要变形了；
JS代码量更少了
例如，我们在全局，或者顶层局部定义这么一个变量：
```
var ACTIVE = 'active';
```
则，由于我们所有的交互都只要这一个类名，因此，当我们JS压缩的时候，其压缩率要高很多，也更好维护。加入说页面中有10个UI交互效果，原先是10个不能压缩的字符串，现在变成了1个，代码量自然要少。
类名压缩成为了可能

来自：http://www.zhangxinxu.com/wordpress/2016/10/classname-active-checked-web-ux-develop/

巴特西

基于active状态类名的web交互开发

最新文章

热门文章