今天早上，當我鼠標無意中移入某課網某一頁面中的“掃碼下載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 相關代碼，可以看看結果如何。
（我在此透漏一下：換過以後，第一次鼠標移入時有動畫效果，但是無論刷新與否，第二次往後都不會再有動畫效果，而是直接，很突兀的顯示在頁面視野中）