主页 / 问题 / 692600
Accepted
Fangog
Asked:2020-07-15 21:36:24 +0000 UTC2020-07-15 21:36:24 +0000 UTC

如何摆脱动画冻结？

  • 772

任务：在赌场制作一个轮盘赌，它会抛出某种奖品。基本上，它是一个快速的无尽旋转木马。

事实上，在 fox 中，由于垃圾收集，它会挂起 500-1000 毫秒。

如何解决这个问题？

也许有现成的类似插件？因为我仍然需要在所需的预选元素上写一个平滑的停止，我仍然完全不知道该怎么做，我想节省时间。

var $carousel = $('#carousel');
var slideWidth = 500;
var prigress = 0;

setInterval(function() {
  prigress -= 50;
  $carousel.css({
    left: prigress
  });
  if (prigress % slideWidth == 0) {
    $('.slide:last').after($('.slide:first'));
    $carousel.css({
      left: 0
    });
    prigress = 0;
  }
}, 13);
body {
  background: #333;
  color: #fff;
}

.wrap {
  position: relative;
  width: 900px;
  height: 300px;
}

.window {
  overflow: hidden;
  position: relative;
  background: #222;
}

#carousel {
  width: 10000px;
  position: relative;
  top: 0;
  left: 0;
}

.slide {
  height: 300px;
  width: 500px;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="window">
    <div id="carousel">
      <span class="slide" id="b1">SLIDE-1</span>
      <span class="slide" id="b2">SLIDE-2</span>
      <span class="slide" id="b3">SLIDE-3</span>
      <span class="slide" id="b4">SLIDE-4</span>
      <span class="slide" id="b5">SLIDE-5</span>
    </div>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    当您更改六个 CSS 属性的值集：margin、padding、top、left、bottom 或 right 时，浏览器会对它在整个页面布局中的显示方式执行额外的计算。因此，要增加动画性能，最好使用：

    .foo {
    transform: translate3d(x, y, z);
}

    transform 性能更高的原因是因为它不影响任何其他元素。您采取的任何操作仅适用于一个元素，浏览器不必重建整个窗口。它只修改包含移动内容的屏幕部分。

    此外，当使用 translate3d 转换元素时，它是通过 Webkit 浏览器（如 Chrome 和 Safari（安装在 iPhone 和 iPad 上））、Internet Explorer 9/10 和最新版本的 Firefox 中的 GPU 处理的。

    因此，在使用时，translate3d您可以获得本地屏幕重组的好处。但除此之外，您还可以获得额外的好处，因为所有工作都由 GPU 完成。

    通过以下方式实施示例transform：

    var $carousel = $('#carousel');
var slideWidth = 500;
var prigress = 0;

setInterval(function() {
  prigress -= 50;
  $carousel.css("transform","translate3d("+prigress+"px,0,0)");
  if (prigress % slideWidth == 0) {
    $('.slide:last').after($('.slide:first'));
    $carousel.css({
      left: 0
    });
    prigress = 0;
  }
}, 13);
    body {
  background: #333;
  color: #fff;
}

.wrap {
  position: relative;
  width: 900px;
  height: 300px;
}

.window {
  overflow: hidden;
  position: relative;
  background: #222;
}

#carousel {
  width: 10000px;
  position: relative;
  top: 0;
  left: 0;
}

.slide {
  height: 300px;
  width: 500px;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="window">
    <div id="carousel">
      <span class="slide" id="b1">SLIDE-1</span>
      <span class="slide" id="b2">SLIDE-2</span>
      <span class="slide" id="b3">SLIDE-3</span>
      <span class="slide" id="b4">SLIDE-4</span>
      <span class="slide" id="b5">SLIDE-5</span>
    </div>
  </div>
</div>

    • 1

相关问题