关于动画切换问题

[hao3304]

用mobilebone开发微信webapp一段时间发现在chrome里调试的时候动画没有问题， 但是在手机上点击标签跳转，有时候会没有动画效果，而是直接跳转到目标页面。 手机使用环境 IPhone5 IOS7,不知道这是设备环境原因还是框架问题？

[plhwin]

手机设备上的确有不小的概率出现这个问题，请作者关注下。

[ghost]

各种特殊都有，有时候需要点击多次才响应！

[hao3304]

这样的确有点影响用户体验。

[zhangxinxu]

你好，给个可访问的出现此问题的页面，我也来点点看~

[chfeizy]

这个确实存在，而且不规律，不知道是不是跟加载内容比较多有关

[swit1983]

https://github.com/zhangxinxu/mobilebone/issues/145 看看我解决的这个问题，说不定有帮助

[plhwin]

反复测试了一下，这边的版本是 Mobilebone.VERSION = '2.5.7';

测试的机器是 iPhone6和Smartisan T1, 发现只要是基本切换就有很大的几率（大概10次里超过3次）出现没有转场动画的情况，而Ajax的请求切换没有发现这个问题，两台机器均是相同表现。

而在Mobilebone内部，无论基本切换还是Ajax切换，应该都是同一调用的 Mobilebone.transition 方法，于是想象了下基本切换与Ajax切换两者在DOM属性上可能的区别，唯一能想到就是基本切换的时候，第一个参数 pageInto这个DOM的display属性是none; 而Ajax切换直接取出的内容的时候，这里的display没有 none 的属性。

于是进行了如下更改：

找到 Mobilebone.transition 这个方法，在第一行代码 if (arguments.length == 0 || pageInto == pageOut) return;

这段代码之后加入：

pageInto.className = "page out"; pageInto.style.display = "block";

再测试，基本就没有出现转场动画没有的情况了。也就是说，设置pageInto这个DOM的 display 为 block 可以很大程度上减少基本切换时没有转场动画的几率。

当然，这只是一个临时性的方案，同时也不确定其他机器是否可以解决这个问题，具体原因要等鑫旭明擦秋毫。

[zhangxinxu]

好的，非常感谢你的测试与反馈~

[zhangxinxu]

现在最大的问题是，我今天1天都在点击我那些测试页面，一次也没有遇到过过场动画嗝屁的情况。

在好多个版本之前，是有过场动画不触发的情况。通过使用pageInto.offsetWidth = pageInto.offsetWidth; 触发重计算解决的。

不知可能提供可以访问的过程有问题的页面地址，我还研究下那里有问题。

[tormentyoung]

部分安卓机自带浏览器或微信浏览器访问那个微信综合的例子，动画不生效，pageinto直接显示，pageout会走动画，还有两个动画切换的时候中间会有空白，我用的安卓机是华为mate7，问题比较严重，希望旭哥能关注下