transition兼容性问题：出行网页动画卡顿的解决办法

坐高铁时打开12306查余票，页面切换总是一卡一卡的？在机场刷航班信息，按钮点击没反应，过两秒才突然弹出？这些看似是网络慢的问题，其实很可能是CSS中的transition属性在某些设备上“罢工”了。

transition不是所有浏览器都买账

transition能让元素平滑变化，比如颜色渐变、位置滑动。但老版本IE（尤其是IE9及以下）根本不认识这个属性。很多中老年人用的电脑还停留在Win7系统，自带的IE浏览器打开现代网页，动画直接失效，甚至布局错乱。

还有些安卓低端机，自带浏览器内核老旧，对transform和transition的支持不完整。你在地图上点个标记，想让它缓缓弹出，结果却是“啪”一下硬出现，体验大打折扣。

写法上多加一层保险

为了照顾这些设备，可以手动补上浏览器前缀。虽然现在主流都支持无前缀写法，但加上-webkit-能覆盖更多旧版移动端。

.btn {
  -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
          transition: all 0.3s ease;
}

特别是-webkit-transition，在iOS 8以下和部分安卓4.x机型上必不可少。别嫌麻烦，多几行代码换来的是火车站里也能流畅操作。

用transform代替left/top动画

很多人习惯用left或top配合transition做位移动画。但这类属性会频繁触发重排，性能差，尤其在低端手机上肉眼可见地掉帧。

换成transform: translateX()或translateY()，走的是GPU加速通道，顺滑得多。比如你做一个滑动购票面板，原本用left从-100%到0，现在改写成：

.slide-panel {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.4s ease;
          transition: transform 0.4s ease;
}

.slide-panel.active {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

这样即使在红米Note 4这种老机型上，滑动也不会卡成PPT。

检测环境，降级处理

实在不行就别硬撑动画。可以用JavaScript简单判断是否支持transition：

function isTransitionSupported() {
  const el = document.createElement('div');
  return 'transition' in el.style ||
         'WebkitTransition' in el.style ||
         'MozTransition' in el.style;
}

if (!isTransitionSupported()) {
  // 禁用动画，直接显示
  document.body.classList.add('no-transition');
}

在.no-transition类下，把所有过渡时间设为0，保证功能可用优先。毕竟赶火车的时候，能快速看到余票比炫酷动画重要多了。

下次做出行类H5页面，别只盯着设计稿看效果，记得拿台旧手机试试。有时候少一点“动效”，反而让旅程更顺畅。