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)致的。
解決:
- 不使用visibility 來(lái)隱藏或顯示對(duì)象,使用display 或 opacity 。
- 不寫(xiě)成 transition:all; 改為了 transition:transform; 。
分析:
visibility 據(jù)說(shuō)是能破壞動(dòng)畫(huà)機(jī)制
具體是什么原因還是沒(méi)有搞清楚
……
補(bǔ)充:
height 也是不能作為動(dòng)畫(huà)的