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)畫(huà)效果。 動(dòng)畫(huà)是一個(gè)不明顯的縮放。 但是在 華為 G-L75 os ：Android 4.3 上 點(diǎn)擊 后div不會(huì)顯示。

原因：

千方百計(jì)找到了原因，就是visibility 與 transition：all 的結(jié)合使用導(dǎo)致的。

解決：

1. 不使用visibility 來(lái)隱藏或顯示對(duì)象，使用display 或 opacity 。
2. 不寫(xiě)成 transition：all； 改為了 transition：transform; 。

分析：

visibility 據(jù)說(shuō)是能破壞動(dòng)畫(huà)機(jī)制
具體是什么原因還是沒(méi)有搞清楚
……

補(bǔ)充：

height 也是不能作為動(dòng)畫(huà)的