［前言］

有人说，前端开发的过程常常就是一个不断“入坑”和“出坑”的。这句话道出了前端开发中的磕磕绊绊以及相伴而来的成长。遗憾的是，这些成长大都只存储在工程师的脑海里，日复一日的，相信总有不少人花掉昂贵的时间在重复解决着同样的“坑”。

Stack Overflow是我们查找一些常见bug解决办法的好帮手，但我们每天也遇到各式各样的新问题以及有一定独特性的问题。若能花一点精力将自己遇到的问题、思考过程、解决方案、延伸感悟等记录下来，让经验更具延续性和相对于具体某个工程师个体的独立性，相信会是一件多赢的事情。因此，我决心抛砖引玉，先把自己曾遇到的一些兼容性问题记录并分享出来。其中，有的可能不太容易遇到，有的可能非常简单。我将尽量采用“问题＋解决方案（＋感想）”的方式进行这个系列内容的编写。

下面言归正传。

问题

有这样一个小动画，让元素<div class="animation-element1">hi, bugs!</div>从屏幕外从右侧滑入，停留一会儿之后再离开屏幕。实现起来很简单，用下面这个CSS样式片段就可以了。

.animation-element1{
      position: fixed;
      -webkit-transform: translate(100%);
      transform: translate(100%);
      right: 0;
      top: 0;
      padding: 1rem;
      width: 10rem;
      background-color: #0fd5ff;
      border-radius: 2rem;
      color: #fff;
      -webkit-animation: opacity-transition1 ease 2s 1s;
      animation: opacity-transition1 ease 2s 1s;
 }
@-webkit-keyframes opacity-transition1{
     0% {
            -webkit-transform: translate(100%);
            transform: translate(100%);
     }
     20% {
           -webkit-transform: translate(-1rem);
           transform: translate(-1rem);
     }
     80% {
           -webkit-transform: translate(-1rem);
           transform: translate(-1rem);
     }
     100% {
           -webkit-transform: translate(100%);
           transform: translate(100%);
     }
 }

但是，当用小米2S中的UC浏览器测试的时候，问题出现了——补间动画丢失了，动画中几个状态之间的切换都是硬切换。而在该手机下的Chrome和系统自带浏览器中均无此问题。

寻找解决办法

我首先考虑它会不会是个性能问题，尝试着用有“动画性能bug神器”之称的-webkit-transform: translate3D(0,0,0);进行修复，但问题未能解决。

仔细察看了一下上面的代码，我又发现，keyframes中几个状态的transform值有时是rem, 有时是百分比，问题会不会出在这里呢？于是，我做了另外一个demo，增加了一个<div class="animation-element2">hi, bugs!</div>，并加上如下样式片段：

.animation-element2{
      position: fixed;
      -webkit-transform: translate(100%);
      transform: translate(100%);
      right: 0;
      top: 20rem;
      padding: 1rem;
      width: 10rem;
      background-color: #0fd5ff;
      border-radius: 2rem;
      color: #fff;
      -webkit-animation: opacity-transition2 ease 2s 1s;
      animation: opacity-transition2 ease 2s 1s;
}

@-webkit-keyframes opacity-transition2{
      0% {
           -webkit-transform: translate(100%);
           transform: translate(100%);
      }
      20% {
          -webkit-transform: translate(-10%);
          transform: translate(-10%);
      }
      80% {
          -webkit-transform: translate(-10%);
          transform: translate(-10%);
       }
      100% {
          -webkit-transform: translate(100%);
          transform: translate(100%);
      }
 }

它的主要变化点在于将keyframes的所有translate都改成了百分比表示。经过测试，问题解决了。于是，我又做了另一个demo——把keyframes的所有translate都改成rem表示的（代码片段如下），问题同样得到解决。此外，我通过translate混用百分比和px两种单位进行测试，效果和一开始混用百分比和rem的那个demo一致，也会出现上述bug。这下问题点就确定了，就是-webkit-keyframes中各阶段translate的表示单位不一致导致了问题的产生。

<div class="animation-element3">hi, bugs!</div>

.animation-element3{
    position: fixed;
    -webkit-transform: translate(12rem);
    transform: translate(12rem);
    right: 0;
    top: 40rem;
    padding: 1rem;
    width: 10rem;
    background-color: #0fd5ff;
    border-radius: 2rem;
    color: #fff;
    -webkit-animation: opacity-transition3 ease 2s 1s;
    animation: opacity-transition3 ease 2s 1s;
}

@-webkit-keyframes opacity-transition3{
    0% {
        -webkit-transform: translate(12rem);
        transform: translate(12rem);
    }
    20% {
        -webkit-transform: translate(-1rem);
        transform: translate(-1rem);
    }
    80% {
        -webkit-transform: translate(-1rem);
        transform: translate(-1rem);
    }
    100% {
        -webkit-transform: translate(12rem);
        transform: translate(12rem);
    }
}

但是，这只证明了keyframes中这么写会有这个问题。那么如果不用keyframes实现动画，而用transition来实现，会不会有同样的问题呢？我又写了下面这个demo：

<div class="animation-element4">hi, bugs!</div>
<script>
    var $el4 = document.querySelector('.animation-element4');
    setTimeout(function () {
         $el4.className+= ' animation-test';
    },2000);

     $el4.addEventListener('webkitTransitionEnd', function () {
         $el4.className = 'animation-element4';
    })
</script>

.animation-element4{
    position: fixed;
    -webkit-transform: translate(100%);
    transform: translate(100%);
    right: 0;
    top: 60rem;
    padding: 1rem;
    width: 10rem;
    background-color: #0fd5ff;
    border-radius: 2rem;
    color: #fff;
    -webkit-transition: -webkit-transform ease 2s;
    transition: transform ease 2s;
}
.animation-element4.animation-test{
    -webkit-transform: translate(-10rem);
    transform: translate(-10rem);
}

试验表明，问题和本文一开始那个demo一样，即也会出现bug。

结论

因此，不管是用keyframes，还是用 transition实现动画，动画过程中几个状态的translate的表示单位不一致的时候，在小米2S的UC浏览器中都会出现补间动画丢失的问题。解决的方案就是统一动画过程中各个状态的translate的表示单位。这应该也是动画的应有之意，只是写代码的时候并没有刻意去留意。相信肯定还会有更多的机器上能复现此问题。