zoukankan      html  css  js  c++  java
  • bootstrap源码学习与示例:bootstraptransition

    虽然是基于不纯的目的来学习它,但想必也对大家有所帮助。

    bootstrap虽然挂着twitter的名字,但实质上只是twitter的两个员工自己的项目。

    bootstrap不是单纯一个项目,它的许多部件,包括CSS部分,JS部分,还是最原始的less部分要依赖其他项目才能运作。不过CSS已经有合并版了,JS我们也只需要导入jQuery。因此想跟着学习的人,到这里把源码部分CSS下载回来,jQuery使用1.83就行了。

    或者搭建以下这样的架子:

    <!DOCTYPE html>
    <html>
        <head>
            <title>bootstrap学习 by 司徒正美</title>
            <meta http-equiv="Content-type" content="text/html; charset=utf-8">
            <script src="http://code.jquery.com/jquery-1.8.3.min.js" > </script>
            <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/> 
            <script>
    
            </script>
        </head>
        <body>
           
        </body>
    </html>
    

    本系列只专注于其JS组件部分。我们先看它实现动画的最核心部分。bootstrap近乎洁癖地只选择CSS3的transition这实现它的动画,因此在IE678看不到效果。加之它的CSS部分也不打算写哈hack,在IE78下显得非常寒碜。因此大陆前端想使用这框架需要再三斟酌了!

    第一篇是解说bootstrap-transition.js这文件,可以自己到github中下回来看。我这里语法高亮了,可能在源码上插入些东西,不能直接拷贝使用。

    
    !function ($) {
    
      "use strict"; // ecma262v5引入的严格模式
    
      $(function () {
    
        $.support.transition = (function () {
    
          var transitionEnd = (function () {
    
            var el = document.createElement('bootstrap')//创建一个自定义标签做测试
              , transEndEventNames = {//用于检测CSS3 transition结束时的回调名   
                   'WebkitTransition' : 'webkitTransitionEnd'
                ,  'MozTransition'    : 'transitionend'
                ,  'OTransition'      : 'oTransitionEnd otransitionend'//opera比较恶心,举棋不定
                ,  'transition'       : 'transitionend'
                }
              , name
    
            for (name in transEndEventNames){
              if (el.style[name] !== undefined) {
                return transEndEventNames[name]
              }
            }
    
          }())
    
          return transitionEnd && {
            end: transitionEnd
          }
    
        })()
    
      })
    
    }(window.jQuery);
    

    总而言之,这文件是为bootstrap其他JS组件提供一个通用的特性检测。由于CSS3的限制,因此它提供的特效也很有限,最常用的就是fade。本文完。

    机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
  • 相关阅读:
    利用消息机制实现.NET AOP(面向方面编程)--通过RealProxy实现 zz
    A Taste of AOP from Solving Problems with OOP and Design Patterns (Part II) zz
    在.Net中使用异步(一)
    在.Net中使用异步(二)
    技术人员的误区(zz)
    A Taste of AOP from Solving Problems with OOP and Design Patterns (Part III) zz
    利用矩阵进行坐标系转换
    如何选择开源许可证[zz]
    .Net,你为什么会慢
    理解 Thread.Sleep 函数
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/2826231.html
Copyright © 2011-2022 走看看