0

我正在做这个（仍在进行中）项目，我注意到低端设备上的一些性能不佳，当然目前有很多动画同时进行（主要使用绿色袜子应用程序平台创建）我可以用 javascript 删除 matchmedia api，但我会保留主要四个部分的主要动画，这是 css：

.section{
  position: absolute;
  z-index: 0;
  width: 50%;
  height: 50%;
  overflow: hidden;
  transform: scale(1);
  will-change: transform;
  transition: all $speed;
  transition-timing-function: cubic-bezier(.4,.2,0,1);


   &:first-child {
   top: 0;
   left: 0;
   background-image: $color-orange;


   }

   &:nth-child(2) {
     top: 0;
     left: 50%;
     background-image: $color-blue;


   }

   &:nth-child(3) {
     top: 50%;
     left: 0;
     background-image: $color-yellow;


   }

   &:nth-child(4) {
     top: 50%;
     left: 50%;
     background-image:$color-violet;

   }

  &.is-expanded{
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;

  }

  .has-expanded-item &:not(.is-expanded){
    transform: scale(0);
    opacity: 0;
  }

}

基本上，当单击标题时，其容器接收 is-expanded 类，主体也接收 ha-expanded-item。

我在这里使用 will change 并且我启用了图像缓存（还没有用于 css 和 javascript），我在 cloudfront 上启用了 gzip 压缩，但我仍然注意到移动设备上的一些性能不佳 有人可以给我一个提示吗？也许我必须使用会以不同的方式改变？谢谢

4

0 回答 0