transition visibility height
code：
.hide{
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
.show{
visibility: visible;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
實(shí)例：
<div id="div1 hide"></div>
<button id="but"></button>
<script>
$('#but').on('click', function(){ $('#div1').toggleClass('show'); });
</script>
點(diǎn)擊按鈕 ，讓一個(gè)div 顯示或者隱藏，想要有動(dòng)畫效果。 動(dòng)畫是一個(gè)不明顯的縮放料仗。 但是在 華為 G-L75 os ：Android 4.3 上 點(diǎn)擊 后div不會(huì)顯示。
原因：
千方百計(jì)找到了原因伏蚊，就是visibility 與 transition：all 的結(jié)合使用導(dǎo)致的立轧。
解決：
- 不使用visibility 來(lái)隱藏或顯示對(duì)象，使用display 或 opacity 躏吊。
- 不寫成 transition：all氛改； 改為了 transition：transform; 。
分析：
visibility 據(jù)說(shuō)是能破壞動(dòng)畫機(jī)制
具體是什么原因還是沒有搞清楚
……
補(bǔ)充：
height 也是不能作為動(dòng)畫的
