下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922
论坛 >编程语言 >前端常见兼容性问题:丢失的CSS补间动画

前端常见兼容性问题:丢失的CSS补间动画

大饼先生发布于 2017-02-17 14:50查看:1022


 

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

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

下面言归正传。

问题

有这样一个小动画,让元素

hi, bugs!

从屏幕外从右侧滑入,停留一会儿之后再离开屏幕。实现起来很简单,用下面这个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,增加了一个

hi, bugs!

,并加上如下样式片段:

.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的表示单位不一致导致了问题的产生。

 

 

 

 

 

 

  

  

  

  

  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>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的表示单位不一致的时候,在小米2SUC浏览器中都会出现补间动画丢失的问题。解决的方案就是统一动画过程中各个状态的translate的表示单位。**这应该也是动画的应有之意,只是写代码的时候并没有刻意去留意。相信肯定还会有更多的机器上能复现此问题。

---------------------------------------------------------------------------

1487314247840973.png

收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有0条评论

      • 课课家运营团队
      • 酸酸~甜甜
      • Mr ken
      • YUI
      • cappuccino
      • mr jack
      • IT宅男
      • Mright
      • 课课家技术团队1
      • 选择版块:

      • 标题:

      • 内容

      • 验证码:

      • 标题:

      • 内容

      • 选择版块:

      移动帖子x

      移动到: