5：等分，居中等頁面佈局 javascript
在說等分以前，先拋出一個問題，以下面的emmet代碼，footer部分的導航有些頁面是三個，有些頁面是四個，咱們要求的是不管是三個仍是四個甚至於5個，都平分寬度。php
footer.footer>ul.nav-links>li*3 footer.footer>ul.nav-links>li*4
若是採用float技術的話，那估計只有在ul上添加額外的class來設置li的百分比寬度了。css
.nav-links li{ float:left; width:25%; } .percent-half li{ width:50%; } .percent-third li{ width:33.333%; } ...
這個太蛋疼了，高上大的移動端怎麼能用這麼老套的東西呢，因此不考慮。html
也許這個技術會被不少人忘記，不過用在移動端確實不錯，關鍵是沒有兼容問題的。主要設置父元素的display: table;table-layout: fixed;width: 100%;，而後設置子元素爲display: table-cell;便可。html5
// table 等分 @mixin table-equal($children: li) { display: table; table-layout: fixed; width: 100%; $childrenEle: li div p a span strong; @if index($childrenEle, $children) { #{$children} { display: table-cell; } } @else { .#{$children} { display: table-cell; } } } .nav-links{ @include table-equal; }
這個mixin內部定義了一個$childrenEle元素選擇器變量集合，若是傳入的參數是其中的一個，那麼直接使用元素選擇器，不然就當class選擇器使用，如默認的li解析後就是li{display: table-cell;}，而若是傳入children，則解析後就是.children{display: table-cell;}。下面的flex一樣使用了該方法java
注：在移動端display: table;一樣也是個有利的神器，比起各類float什麼的，這個技術仍是能夠單刀直入，直指問題核心css3
flex技術是個好技術，不過最關鍵的仍是其兼容問題，算起來它有三個版本，是有點亂哈哈。不過sandal的css3文件已經封裝好了，因此只管調用，它會自動生成對應的兼容代碼。git
// flex 等分 @mixin flex-equal($children: li) { @extend %display-flex; $childrenEle: li div p a span strong; @if index($childrenEle, $children) { #{$children} { @include flex(1); } } @else { .#{$children} { @include flex(1); } } } .nav-links{ @include flex-equal; }
以簡單的彈窗爲例：github
<div class="overlay"> <section class="modal"> <div class="modal-bd"> <p>青，取之於藍，而青於藍；冰，水爲之，而寒於水。故木受繩則直，金就礪則利，君子博學而日參省乎己，則知明而行無過矣。</p> </div> </section> </div>
也許看到這個結構，不少人都會納悶，由於你們看到更多的應該是：.overlay+section.modal，即蒙版與彈出內容是兄弟元素，而不是嵌套關係。這裏先賣個關子，到modal實例的時候，再分析。web
樣式寫在父元素上
// flex center // display:flex %display-flex,%flex-display { @include display-flex; } @mixin flex-center($direction: both) { @extend %display-flex; @if $direction == both { @include justify-content(center); @include align-items(center); } @else if $direction == x { @include justify-content(center); } @else if $direction == y { @include align-items(center); } } .overlay{ z-index: 980; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.8); @include flex-center; // overlay調用 } .modal{ background-color: #fff; border-radius: 5px; margin: 0 10px; overflow: hidden; .modal-bd{ padding: 15px; } }
關於flex的單個元素水平垂直居中，新語法直接父元素爲flex，子元素設置margin爲auto便可，由於移動端還在使用舊語法，因此暫不使用margin這個方法，而是設置父元素的水平及垂直都居中
樣式寫在要居中的元素上。原理就是先絕對定位，left/top爲50%，而後經過translate偏移-50%回去（translate偏移的百分比爲自身寬高的百分比），比從前的margin-top/left設置負值偏移回去高級點，由於設置margin必須得知道自身元素的寬高，而後設置具體的數字，而translate不用管自身的寬高，直接50%就能夠搞定
// translate 50% @mixin translate-center($direction: both) { position: absolute; @if $direction == both { top: 50%; left: 50%; @include translate(-50%, -50%); } @else if $direction == x { left: 50%; @include translate(-50%, 0); } @else if $direction == y { top: 50%; @include translate(0, -50%); } } .overlay{ z-index: 980; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.8); } .modal{ @include translate-center; // modal調用 background-color: #fff; border-radius: 5px; width:300px; overflow: hidden; .modal-bd{ padding: 15px; } }
上面的flex和translate兩個mixin均可以實現單獨的水平居中或垂直居中，傳入相應的x或y便可。不管是flex仍是translate水平垂直居中都有兩個很好的優點即無需藉助額外的空標籤，也無需知道子元素的具體寬高，這比從前的一些方法強多了
對於左右兩端對齊，之前使用最多的可能就是float，position了，如今一樣能夠採用flex來搞定
// justify @mixin justify($extend: true) { @if $extend { @extend %justify; } @else { @extend %display-flex; @include justify-content(space-between); } } %justify { @include justify(false); } .justify{ @include justify; }
若是你開始作移動端，那麼flex和transform這兩大屬性有必要熟練運用，運用好了能解決不少問題。通常來講flex能夠用來實現一些佈局，不再用動不動就float了；而transform中的rotate及translate則能夠實現一些旋轉及位移移動，旋轉能夠搞定圖標的一些變化，而位移移動則能夠實現居中，位移動畫等。
具體頁面代碼以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<meta content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="telphone=no" name="format-detection">
<title>等分</title>
<style id="jsbin-css">
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
html,body{height:100%;}
html{font-family:"Helvetica Neue",Helvetica,STHeiTi,Arial,sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-size:62.5%;}
body{margin:0;font-size:1.4rem;line-height:1.5;color:#333;background-color:#fff;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}
audio:not([controls]){display:none;height:0;}
[hidden],template{display:none;}
a{background:transparent;text-decoration:none;-webkit-tap-highlight-color:transparent;color:#08c;}
a:active{outline:0;}
a:active{color:#069;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
mark{background:#ff0;color:#000;}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;vertical-align:middle;}
svg:not(:root){overflow:hidden;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
pre{overflow:auto;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}
button{overflow:visible;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
input{line-height:normal;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
textarea{overflow:auto;resize:vertical;}
optgroup{font-weight:bold;}
table{border-collapse:collapse;border-spacing:0;}
td,th{padding:0;}
html,button,input,select,textarea{font-family:"Helvetica Neue",Helvetica,STHeiTi,Arial,sans-serif;}
h1,h2,h3,h4,h5,h6,p,figure,form,blockquote{margin:0;}
ul,ol,li,dl,dd{margin:0;padding:0;}
ul,ol{list-style:none outside none;}
h1,h2,h3{line-height:2;font-weight:normal;}
h1{font-size:1.8rem;}
h2{font-size:1.6rem;}
h3{font-size:1.4rem;}
input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc;}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.demo{line-height:44px;margin-bottom:20px;text-align:center;background-color:#0078e7;color:#fff;}
.flex-equal,.flex-center,.justify{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
.flex-equal li{-webkit-box-flex:1;-ms-flex:1;-webkit-flex:1;flex:1;}
.table-equal{display:table;table-layout:fixed;width:100%;}
.table-equal li{display:table-cell;}
.demo-center{border:1px solid #ccc;margin:20px;height:200px;}
.demo-center .children{background:#0078e7;color:#fff;width:150px;line-height:5;text-align:center;}
.flex-center{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;}
.translate-center{position:relative;}
.translate-center .children{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.justify{-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;padding:0 10px;background:#0078e7;color:#fff;line-height:32px;}
</style>
</head>
<body>
<h2>flex等分</h2>
<ul class="flex-equal demo">
<li>手機</li>
<li>聯繫人</li>
<li>信息</li>
<li>主屏</li>
</ul>
<ul class="flex-equal demo">
<li>手機</li>
<li>聯繫人</li>
<li>信息</li>
</ul>
<h2>table等分</h2>
<ul class="table-equal demo">
<li>手機</li>
<li>聯繫人</li>
<li>信息</li>
<li>主屏</li>
</ul>
<ul class="table-equal demo">
<li>手機</li>
<li>聯繫人</li>
<li>信息</li>
</ul>
<h2>flex居中</h2>
<div class="flex-center demo-center">
<div class="children">子元素水平垂直居中</div>
</div>
<h2>translate居中</h2>
<div class="translate-center demo-center">
<div class="children">子元素水平垂直居中</div>
</div>
<h2>兩端對齊</h2>
<div class="justify"><h2>左邊對齊</h2><span>右邊對齊</span></div>
</body>
</html>
6：切入切出動畫
先定義要運動的元素在視覺範圍以外，以左方向進入爲例，同時定義transition：
.demo{
@include translate3D(-2000px, 0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; }
從進入視覺範圍來講，不論方向從上下仍是左右，最終都歸於0，因此進入的時候添加class translate-in，而離開的時候去掉translate-in便可
.translate-in{ @include translate3D(0, 0, 0); }
先定義要運動的元素在視覺範圍以外，一樣以左方向爲例：
.demo{
@include translate3D(-2000px, 0, 0); }
再定義keyframes：
// 從左向右方向進入動畫 @mixin left-in($startX: -2000px, $endX: 0) { @include keyframes(left-in) { 0% { @include translate3d($startX, 0, 0); } 100% { @include translate3d($endX, 0, 0); } } .left-in { @include animation-name(left-in); @extend %animated; } } // 從右向左方向消失動畫 @mixin left-out($startX: 0, $endX: -2000px) { @include keyframes(left-out) { 0% { @include translate3d($startX, 0, 0); } 100% { @include translate3d($endX, 0, 0); } } .left-out { @include animation-name(left-out); @extend %animated; } }
調用上面定義的keyframes，元素進入視覺範圍添加class left-in，元素離開視覺範圍則替換left-in爲left-out，動畫結束後調用animationend事件，刪除left-out
@include left-in; @include left-out;
解析後的css爲：
.left-in, .left-out { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes left-in { 0% { -webkit-transform: translate3d(-2000px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes left-in { 0% { transform: translate3d(-2000px, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } .left-in { -webkit-animation-name: left-in; animation-name: left-in; } @-webkit-keyframes left-out { 0% { -webkit-transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-2000px, 0, 0); } } @keyframes left-out { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-2000px, 0, 0); } } .left-out { -webkit-animation-name: left-out;