談談css使用中遇到的的一些坑

今天早上，當我滑鼠無意中移入某課網某一頁面中的“掃碼下載下傳APP”的fixed圖上，看到一張二維碼從這個圖的相對底部慢慢、慢慢的移上來，或者說：展開 時，我就知道，今天有事幹了。。。

我大緻分析了一下，欸，覺得挺簡單的，然後興沖沖地去編譯器上噼裡啪啦，然後，，，錯了，（真的是一頓操作猛如虎，一看戰績…）結果和我的預期，完全不符！

這是預期展開一半的效果：

而在我一頓操作之下，把從上往下弄成了從下往上。。。

我輾轉反側，怎麼才能從下往上呢？

請教了同工作室的一位學長，他說用jQuery的slideUp好像可以，但是本着“原生”的理念，我婉拒了學長的“好意”。

又回到原點想我的代碼，寫過 頁面初始時頂部下滑廣告 （類似京東那種）的朋友們都知道：我這種方法是用了原生JS 先判斷圖檔寬高，然後設定“步長”，最後通過滑鼠事件不停地改變框的寬高 的方法。

想到最後得出一個結論：這麼做很難（或者說非常麻煩）将上下縮放改為下上縮放！不然你可以滑鼠移入時同時加一個遮罩層，然後慢慢把遮罩層放上去！（呵呵）

正當疑惑，突然看到以前的一篇部落格中的一句話：能用css的就不要用js！

仿佛突然看到了光明—— css 過渡！ 也由此開始了“報錯”之旅。。。

當你div的寬度不夠你一行文字完整表述時，對文字用line-height屬性會導緻多出一行的字型“跑到了”div框的外面！

猜測這個和div模型有關，但确實，你不能過度依賴浏覽器的機制——對文字應手動換行，或者操作，比如：多出一行的用…代替。

display、visibility和opacity

書上經常會看到這麼一句話：使用display:none;會導緻元素不可見，且在頁面上的位置也會随之消失（不占位）；而visibility隻是設定元素不可見，依然在文檔流中占有位置。

其實後一句話是不準确的表述：我們很容易了解為，它就相當于opacity:0;一樣操控自如。

事實上，當你對元素設定了visibility:hidden;時，元素會帶着他的對應事件一起“滾蛋”。雖然在文檔流中占有位置，但是絲毫不影響其下或被其顯示時遮擋的元素的操作！

明白這一點至關重要 —— 至少在本篇文章所用知識中是這樣。

說一下我的思路：

在頁面右邊設定一個小框，是用于滑鼠響應事件主題，對其設定一個子元素——是一個div，這個div要求在滑鼠移入父元素之前和移出父元素之後消失不見。對這個div再有一個子元素——img，這個img也有要求：滑鼠移入它的父元素的父元素時慢慢顯示到框中并占滿整個div，超出父元素div的部分看不見也不能操作。

（“過渡”顯示到3/4時的樣式）

這就好看多了。。。

<div id="mxc">
    快來掃碼啦
    <div id="mm">
        <img id="mmxc" src="imag/qq.png">
    </div>
</div>      

#mxc{
    position: fixed;
    width: 50px;
    height: 70px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: lightgrey;
    text-align: center;
    cursor: pointer;
}
#mxc #mm{
    position: absolute;
    width: 150px;
    height: 200px;
    top: -132px;
    left: -150px;
    visibility: hidden;
    overflow: hidden;
}
#mm #mmxc{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translate(150px, 200px);
    opacity: 0;
    transition: all .3s;
}
#mxc:hover #mm{
    visibility: visible;
}
#mxc:hover #mm #mmxc{
    opacity: 1;
    transform: none;
}      

感興趣的讀者可以自行試一下，将其中的 visibility 全部換成 display 相關代碼，可以看看結果如何。

（我在此透漏一下：換過以後，第一次滑鼠移入時有動畫效果，但是無論重新整理與否，第二次往後都不會再有動畫效果，而是直接，很突兀的顯示在頁面視野中）

pointer-events: none;