微信小程序使用translate3d实现无限循环移动，在IOS出现闪屏问题

最新推荐文章于 2024-01-23 15:14:41 发布

little_kid_pea

最新推荐文章于 2024-01-23 15:14:41 发布

阅读量2.5k

点赞数 2

分类专栏：笔记文章标签：微信小程序 IOS css动画无限循环移动闪屏

原文链接：https://www.cnblogs.com/gaoxue/p/3753734.html

版权

笔记专栏收录该内容

44 篇文章 0 订阅

订阅专栏

reference

结构

<view class="J-slider block">
　<view class="J-scroller">
　　　　<view class="item block"></view>
　　　　<view class="item block"></view>
       <view class="item block"></view>
　　</view>
</view>

基本样式：

@keyframes move {
    from {
      transform: translate3d(-200vw;0,0);
    }
    to {
      transform: translate3d(0;0,0);
    }
  }

  .J-slider {
    position: relative;
    overflow: hidden;
  }
  
  .block {
    width: 100vw;
    height: 50vh;
  }
  
  .J-scroller {
    width: 300vw;
    height: 100%;
    position: absolute;
    animation: move 5s 0s linear infinite both;
  }
  .J-scroller .item{
    position: absolute;
    top: 0px;
  }
  .J-scroller .item:nth-child(1){
    left: 0px;
  }
  .J-scroller .item:nth-child(2){
    left:750rpx;
  }
  .J-scroller .item:nth-child(3){
    left: 1500rpx;
  }

假如以上结构的多图左右移动查看， J-scroller是一块很大的动画移动层，我们对J-scroller设置了 translate3d(x,y,z) 以及animation 动画，

此时iphone查看移动时会有闪屏现象，因为webkit是不会将J-scroller这么大的层整个分配内存绘制渲染。

这时候我们需要将滚动区域可视范围的列表项item元素缓存起来

.item{
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

另外，当translate使用2d而非3d的呈现方式时，我们要设置当前动画移动元素的呈现方式为3d，它的所有子元素背面隐藏：

.J-scroller{
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.J-scroller .item{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}