基于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交互开发的更多相关文章
- 基于.Net Framework 4.0 Web API开发(4):ASP.NET Web APIs 基于令牌TOKEN验证的实现
概述: ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题, ...
- 基于.Net Framework 4.0 Web API开发(2):ASP.NET Web APIs 参数传递方式详解
概述: ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.调用API过程中参数的传递是必须的,本节就来谈谈 ...
- 基于.Net Framework 4.0 Web API开发(3):ASP.NET Web APIs 异常的统一处理Attribute 和统一写Log 的Attribute的实现
概述: ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是项目,总有异常发生,本节就来谈谈API的异常 ...
- 基于.Net Framework 4.0 Web API开发(5):ASP.NET Web APIs AJAX 跨域请求解决办法(CORS实现)
概述: ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特 ...
- 基于ANGULAR.JS的下一代WEB应用开发-01-yeoman
Angularjs 个人认为这是一款很好的框架!它将我们从AJAX应用的开发中解救了出来!嗯....废话就说道这里下面我们开始把! 首先我们必须了解一些核心的概念: 客户端模版 MVC 数据绑定 依赖 ...
- 淘宝前端工程师:国内WEB前端开发十日谈
一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...
- Web前端开发十日谈
=========================================================================== 原文章: http://kb.cnblogs.c ...
- 绝对精品推荐做前端的看下:Web前端开发体会十日谈
20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈 一直想写这篇“十日谈”,聊聊我对W ...
- SpringMVC内容略多 有用 熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。
熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构 ...
随机推荐
- Object源码
1.Object是所有类的父类,默认会继承Object. 2.Object类中常用的方法有:getClass().hashCode().equals().clone().toString().fina ...
- SystemTap使用技巧 1 - 4 非常重要
http://blog.csdn.net/wangzuxi/article/details/42849053
- PR物料KFF弹出LOV - WHERE条件重写
PROCEDURE event (event_name VARCHAR2)IS---- This procedure allows you to execute your code at specif ...
- jQuery.ajax()方法中參数具体解析
前言 在项目开发中,为了实现异步向服务端发起请求,最常常使用的就是jQuery.ajax方法了.刚開始需求比較简单,调用jQuery.ajax方法时要传的參数也就那几个常见的參数:url/data/d ...
- SolidEdge如何绘制阵列之后取消掉某一些
在最后一步点击"抑制事件",然后可以在被阵列的圆形上单击,被抑制的圆形变成灰色
- 细说linux IPC(三):mmap系统调用共享内存
[版权声明:尊重原创,转载请保留出处:blog.csdn.net/shallnet 或 .../gentleliu,文章仅供学习交流,请勿用于商业用途] 前面讲到socket的进程间通 ...
- 2016-1-8 windows 7下安装mysql及其配置和运用
绪言 最近学习了一下mysql的相关用法,以及vs2010结合mysql的使用. 遇到的问题:1.安装mysql 5.6 绿色免安装版本,出现mysql server not connect loca ...
- python基础小练习
def main(): number = int(input("请输入学生的总人数:")) # 输入要录入的学生总数 count = number # 用一个变量来保存这个学生总数 ...
- Jenkins+maven+SVN+Tomcat部署过程
一.下载地址 应首先确认安装了JDK: Jenkins下载地址:http://mirrors.shu.edu.cn/jenkins/windows-stable/jenkins-2.107.3.zip ...
- backtrace、backtrace_symbols、backtrace_symbols_fd-support for application self-debugging
backtrace是库函数引入的应用自调试函数. 系列里的三个函数可以缓冲或输出栈帧. #include <execinfo.h> int backtrace(void **buffer, ...