华为手机的神奇CSS 动画bug

[mishe]

有一个弹窗，存在一个从上到下的动画处理。采用的是css3 动画，代码如下：

.slide_css_animate{
    -webkit-transition:all .2s ease;
    transition:all .2s ease;
}
.slideDown_up{margin-top:-1000px}
.slideDown{margin-top:0}

弹窗默认是slideDown_up的样式，也就是页面默认是在屏幕外的，但激活弹窗的时候，样式变为了slideDown，也就是在页面的顶部。中间由于有css3动画，所以会有一个从上到下的过程

但在华为手机上没有任何效果，也看不到弹窗的内容。

试着改变样式，采用transform:translate3d来呈现，也一样的没有效果；

采用JS实时监测弹窗的margin-top属性，发现该值还是保持-1000px；采用延时setTimeout，去重置margin-top：0后，弹窗还是保持不可见

这是JS监测margin-top属性，发现该值已经是0；

回过头来，把slideDown_up直接修改为0；发现弹窗是正常显示的。

就这样浆糊调试了3个小时后，突然灵光一现，试着去掉了css3的动画，也就是弹窗去掉transition:all .2s ease;后，发现问题竟然就这么解决了。