zoukankan      html  css  js  c++  java
  • 基于active状态类名的web交互开发

    demo:

    默认是这样的:
    更多效果截图

    当我们点击更多按钮后,会以CSS3动画的方式展开剩余所有文字信息,如下动图:
    .active实现展开更多动画效果gif截图

    下面我们看下关键的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本质上扮演的角色不是类名样式,而是一个标识符!

    1. 省了很多想命名的脑细胞

      妈妈再也不要担心有些单词不知道怎么翻译啦~~

    2. CSS和JS代码可读性更强了

      一旦在CSS或JS中看到'.active',大家都知道,页面这块内容要变形了;

    3. JS代码量更少了

      例如,我们在全局,或者顶层局部定义这么一个变量:

      var ACTIVE = 'active';

      则,由于我们所有的交互都只要这一个类名,因此,当我们JS压缩的时候,其压缩率要高很多,也更好维护。加入说页面中有10个UI交互效果,原先是10个不能压缩的字符串,现在变成了1个,代码量自然要少。

    4. 类名压缩成为了可能

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

  • 相关阅读:
    第20月第30日 集体智慧编程
    第20月第29天 cocoa抽象工厂 cocoapods组件化 cocoapods升级
    第20月第28天 tensorflow
    第20月第27天 游戏编程的人工智能
    第20月第22天 2016计算机大会后记——机器学习:发展与未来
    第20月第18天 小码哥swift
    第20月第17天 mvvm 多次点击push -ObjC
    第20月第14天 objc_getAssociatedObject _cmd
    第20月第9天 paddlepaddle
    第20月第4天 pycharm utf-8
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/6094690.html
Copyright © 2011-2022 走看看