CSS3 动画的“坑”

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);
}

实例：

<div id="div1 hide"></div>
<button id="but"></button>
<script>
 $('#but').on('click', function(){ $('#div1').toggleClass('show'); });
</script>

点击按钮 ，让一个div 显示或者隐藏，想要有动画效果。 动画是一个不明显的缩放。 但是在 华为 G-L75 os ：Android 4.3 上 点击 后div不会显示。

原因：

千方百计找到了原因，就是visibility 与 transition：all 的结合使用导致的。

解决：

1. 不使用visibility 来隐藏或显示对象，使用display 或 opacity 。
2. 不写成 transition：all； 改为了 transition：transform; 。

分析：

visibility 据说是能破坏动画机制
具体是什么原因还是没有搞清楚
……

补充：

height 也是不能作为动画的