框架实战-day1

HTML5常用框架

前言

• 随着HTML5规范的不断完善，围绕着这一生态有很多实用的框架，极大的提高了我们的开发效率，常见的框架代表有：UI层面的有Bootstrap、Yui、JqueryUI、CSS3Lib等，JS层面的有JQuery、Zeptojs、Angularjs、React、Vuejs等，还有很多常用的动画库、字体图标，比如：Animate、Wow、Iconfont、Iconmoon等。

• 这些前端框架典型的特点：简单易用、相通性强，我们可以在学习一个框架后快速上手其他框架。

一、 Animate.css

图1

• Animate.css是一个css动画样式库，其目标是让CSS动画像喝水一样容易（Just-add-water CSS Animation）。

  • animate.css is a bunch of cool, fun, add cross-brower animations foy you to use in your projects. Greate for emphasis, home pages, sliders, and general jus-add-water-awesomeness.(animate.css是有一堆狂拽酷炫吊炸天、跨浏览器的动画特效的综合动画库)
  • animate.css是一个来自国外的CSS3动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达70多种动画特效，几乎包含了所有常见的动画特效。
  • 重点：浏览器兼容，animate.css底层是通过css3实现的，当然是只兼容支持CSS3 animate属性的浏览器： IE10+、Firefox、Chrome、Opera、Safari。
  • 官方演示：https://daneden.github.io/animate.css/
  • 案例演示：登录界面特效

• Animate.css的具体使用

• 引入文件

• 给要做动画的HTML标签添加上相对应的类，比如：

• 注意：类animated的作用是控制动画的持续时间，是所有动画的前提条件， 在其后面的类则为动画的效果类。

思考？

• 通过Animate.css只给我们省去了一部分效果动画，其他的还需要用js/jQuery来手写，能不能够再化简一些？

Snip20170204_6.png

• World of Warcraft可以帮助我们解决这个问题。

二、WOW.js

wow-logo.jpg

• 核心作用：让页面滚动更有趣；

  • 通过WOW.js，可以在页面逐渐向下滚动的过程中逐渐释放这些动画效果。也就是说：当我们向下滚动页面时，可以省去很多判断条件，让CSS动画逐渐展示出来。

• 特点

  • 轻量级类库， 不依赖jQuery，超简单的安装和使用，与animate.css配合，只需要短短几行代码就可以实现很多特效。
  • 容易定制，我们可以改变动画去设置喜欢的风格、延迟、长度、偏移和迭代等等。

• 兼容性考虑

  • 因为，WOW.js要和animate.css配合使用，所有其也只兼容支持CSS3 animate属性的浏览器：IE10+、Firefox、Chrome、Opera、Safari。

• 如何使用？

• 引入文件

• 在相对的HTML标签中通过类进行引用

• 在JavaScript中进行初始化

  new WOW().init();

• 案例演练：WOW初体验

• WOW.js常用的属性

  • data-wow-delay: 动画开始前延迟
  • data-wow-duration: 动画持续时长
  • data-wow-iteration: 动画重复次数
  • data-wow-offset: 距离浏览器底部到隐藏框顶部的距离（偏移量）

• 来搞定它？
• 可以加入data-wow-duration(动画持续时间)和data-wow-delay（动画延迟时间）等属性。
• 比如

• data-wow-offset

  • 用于决定当前的元素在滚动的时候到达怎样的位置出现（是在滚动之前出现、滚动之后出现，还是滚动的时候出现），比如：http://www.520it.com/special/html5
  

  Snip20170204_7.png

• WOW的默认配置参数

  var wow = new WOW({
     boxClass: 'wow',   // 动画元素的CSS类（默认类名wow）
     animateClass:'animated', // 动画CSS类 （默认类名animated）
     offset: 0,  // 距离可视区域多少开始执行动画（默认为0）
     mobile: true, // 是否在移动设备上执行动画 （默认是true）
  });
  
  wow.init();

• WOW.js存在怎样的问题？
• WOW.js实例的动画只能加载一次，如果要重新执行动画必须要进行刷新。
• 但是在实际开发中，更多时候动画是只加载一次，否则会造成视觉错乱。那如果要多次重复展现动画该如何处理呢？

三、scrollReveal

Snip20170204_8.png

• scrollReveal是一个兼容PC端和移动设备的滚动动画库。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；

• 特点：

  • scrollReveal同时兼容PC端和移动端；
  • 0依赖（不依赖于jQuery，也不依赖于animate.css）;
  • 定制性高，使用简单方便快捷。

• 浏览器兼容：

  • 虽然scrollReveal.js不依赖于animate.css，但是它的动画也是用CSS3创建的，所以依然需要支持HTML5和CSS3比较好的浏览器，比如： IE10+、Firefox、Chrome、Opera、Safari。

    
    
    

    Snip20170204_9.png

• 官网：https://scrollrevealjs.org/

• 使用方法：

  • 引入文件：
  • html:
  • JavaScript:

    window.onload = function () {
        window.sr = ScrollReveal();
        sr.reveal('.box');
    }
  

• 常用参数：

  var config = {
                reset: false,   // 滚动鼠标时，动画开关
                origin: 'bottom', // 动画开始的方向
                duration: 500,   // 动画持续时间
                delay: 0, // 延迟
                rotate: {x:0, y:0, z:0},  // 过度到0的初始角度
                opacity: 0, // 初始透明度
                scale: 0.9, //缩放
                easing: 'cubic-bezier(0.6, 0.2, 0.2, 1)', // 缓动'ease', 'ease-in-out'，'linear'...
                // 回调函数
                beforeReveal: function(domEl){},
                beforeReset: function(domEl){},
                afterReveal: function(domEl){},
                afterReset: function(domEl){}
  };
  
  window.sr = ScrollReveal();
  sr.reveal('.sr', config);

• 案例演示：

    
    
    


   

       

           
![](images/01.jpg)
           
![](images/02.jpg)
           
![](images/03.jpg)
           
![](images/04.jpg)
           
![](images/05.jpg)
           
![](images/06.jpg)
           
![](images/07.jpg)
           
![](images/08.jpg)
           
![](images/09.jpg)
           
![](images/10.jpg)
       
       

           
![](images/11.jpg)
           
![](images/12.jpg)
           
![](images/13.jpg)
           
![](images/14.jpg)
           
![](images/15.jpg)
           
![](images/16.jpg)
           
![](images/17.jpg)
           
![](images/18.jpg)
           
![](images/19.jpg)
           
![](images/20.jpg)
       
       

           
![](images/31.jpg)
           
![](images/32.jpg)
           
![](images/33.jpg)
           
![](images/34.jpg)
           
![](images/35.jpg)
           
![](images/36.jpg)
           
![](images/37.jpg)
           
![](images/38.jpg)
           
![](images/39.jpg)
           
![](images/40.jpg)
       
       

           
![](images/01.jpg)
           
![](images/02.jpg)
           
![](images/03.jpg)
           
![](images/04.jpg)
           
![](images/05.jpg)
           
![](images/06.jpg)
           
![](images/07.jpg)
           
![](images/08.jpg)
           
![](images/09.jpg)
           
![](images/10.jpg)
       
   
   
   

四、scrollReveal 和 WOW的区别和联系

• 它们都不依赖jQuery；
• wow依赖于animate.css ，ScrollReveal不依赖任何其他插件或者库；
• wow的释放动画，只能够实现一次，而ScrollReveal可以无限次使用；
• ScrollReveal 参数相对比较多，比较复杂些；
• 实际工作中，用wow比较多。

五、LESS

Snip20170204_10.png

• 什么是LESS?

Less 是一门 CSS 预处理语言，使用了类似CSS的语法，为CSS赋予了动态语言的特征。它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展。此外，Less 可以运行在 Node 或浏览器端。

• 一句话：用类似JS的语法去写CSS

• LESS的特点：

  • 作为CSS的一种扩展，LESS CSS不仅向下兼容CSS的语法，而且连新增的特性也是使用CSS语法。这样的设置使得学习LESS非常轻松，而且你可以在任何时候回退到CSS。

• 变量：单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了

     // JS中定义变量
     var name = '张三';
     
     // LESS中定义变量
     @color:red;
     h1{
        color: @color;
     }
  

• 嵌套

  • 在一个选择器中嵌套另一个选择器来实现继承，这样很大程度上减少了代码量，并且代码看起来更加清晰。

    div{
      h1{
         color:red;
      }
    }
  

  注意：嵌套一般情况下，不要超过3层

• 运算

  • 运算提供了加、减、乘、除操作，其他复杂的运算交给函数；通常我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。

  注意：运算符与值之间必须以空格分开。

    @w:500px;
    
    div{
      h1{
        width: @w - 100;
      } 
    }
    
    h1{
      width: @w;
      border: 1px solid #000;
    }
  

• 混合(Mixins)

  • 混合可以将一个定义好的class A轻松的引入到class B中，从而简单的实现class B 继承class A的所有属性。我们还可以带参数的调用，就像使用函数一样。
  

  图片 1.png
  • 注意：混合的使用就和js的自定义函数类似，首先 混合 必须前面是以 . +混合名称开始
  • 结构：.名称(变量){}
  • 可以有默认值，也可以没有默认值，没有的话，在调用的时候必须传参，有默认值的时候就可以不用传递参数；
  • 多个参数之间和js一样，用逗号（,） 隔开

• 函数

  • LESS中的函数 - 映射了JavaScript函数代码，如果你愿意的话，可以操纵属性值。

  • 比如：鼠标移上亮度增加20%。

    
    
    

    图片 2.png

  • 需要查找的时候，直接查文档就可以了

  • 比如：

   saturate(@color, 10%); // 饱和度增加 10%
   desaturate(@color, 10%); // 饱和度降低 10%
   lighten(@color, 10%); // 亮度增加 10%
   darken(@color, 10%); // 亮度降低 10%
   fadein(@color, 10%); // 透明度增加 10%
   fadeout(@color, 10%); // 透明度降低 10%
   fade(@color, 50%); // 设定透明度为 50%
   spin(@color, 10); // 色相值增加 10
   ……
  

• 匹配模式

  • 类似js中的if else判断，只有匹配成功才能起作用
  

  图片 3.png

  注意：匹配模式中,定义的模式名称都是一样的，只是参数不一样，调用的时候只需选择对应的参数就可以了。

• 如何使用LESS?

  • 方式一：客户端直接调用

  注意：必须在服务器环境中才能生效，动态编译注入虚拟DOM或者内存中，类似ajax。
  开发中常用的服务器组合：WAPM

  • 方式二：预编译（提前编译）

    • 在代码编辑器中，按照LESS的语法规则写好LESS文件；
    • 使用编译工具把.less文件编译成.css文件；
    • 把编译后的css文件引入到页面即可。

    编译工具：Koala

    

    Snip20170205_11.png

• 如何在一个LESS文件中导入另一个LESS文件？

   @import "less.less";   // 注意：less文件扩展名可选

• 其他补充
• // 不会被编译器编译的注释
• /**/ 是可以被编译器编译的 注释
• ~’’ 表示的是禁止被编译
• & 表示选择所有的父级元素

• 《授之于渔》
  • LESS官网：http://lesscss.org/
  • LESS中文网 ：
    http://www.lesscss.cn/
    http://www.lesscss.net/