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。本文完。

    机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
  • 相关阅读:
    html 上传图片前预览
    php获取当月天数及当月第一天及最后一天、上月第一天及最后一天实现方法
    php 计算 pdf文件页数
    php 获取半年内每个月的订单数量, 总价, 月份
    php 获取两个数组之间不同的值
    小程序支付功能
    关于nginx的Job for nginx.service failed because the control process exited with error code.错误
    linux 安装 Apollo
    MongoDB待续。。。
    ABP vNext...待续
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/2826231.html
Copyright © 2011-2022 走看看