javascript - 在学习写微信页面切换的时候，发现动画效果失效了。。求解-PHP中文网问答

各位大侠好，我想问一下我在写页面切换的时候，发现在Chrome上面模拟安卓手机是好用的，会有页面切换的效果，但是到手机上就没有用了，手机chrome是可以的，原生的浏览器，微信浏览器都不能用。我加alert()，本来以为是事件touchstart、touchmove、touchend没触发，但这三个事件都可以有效果，而且translate3d的y值都有变化，就是没动画，求解。。

git链接：https://github.com/Emiya0306/WeChart-WebAppTemplete

<!DOCTYPE html>
<html>
  <head>
    <title>WebChat-WebAppTemplete</title>
    <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel='stylesheet' href='/stylesheets/wechat-H5.css' />
    <script src='/javascripts/wechat-H5.js'></script>
  </head>
  <body>
    <ul id='app'>
      <li>
        <h1>Page1</h1>
        <p>test1</p>
        <button onClick="webchat.movePage(3);">test</button>
      </li>
      <li>
        <h1>Page2</h1>
        <p>test2</p>
      </li>
      <li>
        <h1>Page3</h1>
        <p>test3</p>
      </li>
      <li>
        <h1>Page4</h1>
        <p>test4</p>
      </li>
    </ul>
    <script>
      var myApp = document.getElementById('app');
      var webchat = new webchat(myApp, document.body.clientHeight, document.body.clientWidth);
    </script>
  </body>
</html>

写的CSS代码如下：
html * {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body ul {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.2s ease-out;
}

body ul > li {
  position: relative;
  display: block;
  list-style-type: none;
}

写的js代码如下：
function webchat (app, height, width) {
  this.target = app;
  this.height = height;
  this.width = width;
  this.page = 0;
  this.init();
}

webchat.prototype.resizePage = function () {
  for (var i = 0; i < this.target.children.length; i++) {
    this.target.children[i].style.width = this.width + 'px';
    this.target.children[i].style.height = this.height + 'px';
  }
  this.bindTouchEvent(this.target);
};

webchat.prototype.bindTouchEvent = function (target) {
  target.addEventListener('touchstart', this.startHandler);
  target.addEventListener('touchmove', this.moveHandler);
  target.addEventListener('touchend', this.endHandler);
};

webchat.prototype.init = function () {
  this.resizePage();
};

webchat.prototype.movePage = function (index) {
  this.page = index;
  this.target.style.transform = 'translate3d(0, ' + (webchat.page * (-webchat.height)) + 'px' + ', 0)';
};

webchat.prototype.startHandler = function (event) {
  this.startTime = Date.now();
  this.startX = event.touches[0].clientX;
  this.startY = event.touches[0].clientY;
};

webchat.prototype.moveHandler = function (event) {
  event.preventDefault();
  this.moveTime = Date.now();
  this.moveX = event.touches[0].clientX - this.startX;
  this.moveY = event.touches[0].clientY - this.startY;
  this.style.transform = 'translate3d(0, ' + (webchat.page * (-webchat.height) + this.moveY) + 'px' + ', 0)';
};

webchat.prototype.endHandler = function (event) {
  event.preventDefault();
  if (this.moveY > 150 && webchat.page > 0) {
    webchat.page --;
    alert('page--: ' + webchat.page)
  } else if (this.moveY < -150 && webchat.page < webchat.target.children.length - 1) {
    webchat.page ++;
    alert('page++: ' + webchat.page)
  }
  this.style.transform = 'translate3d(0, ' + (webchat.page * (-webchat.height)) + 'px' + ', 0)';
  alert(this.style.transform)
  this.endTime = Date.now();
};