究竟是什么标识了网站访问者？

Question

Yuri

Asked:2020-08-15 19:24:14 +0000 UTC2020-08-15 19:24:14 +0000 UTC 2020-08-15 19:24:14 +0000 UTC

没有 jQuery 的动画

772

如何在没有 jquery 的情况下制作 jquery 动画功能？有了 CSS 属性，一切就很清楚了：它们可以通过过渡和动画来绘制，但是如何才能平滑地更改 HTML 呢？

如何在 3 秒内平滑更改进度条的值和旁边的数字？那些。如何在 3 秒内将条形附近的宽度和值从 10% 平滑更改为 80%？

.progress {
  display: inline-block;
  width: 200px;
  height: 12px;
  border: 1px solid black;
  border-radius: 6px;
  overflow: hidden;
}
.progress_bar {
  display: inline-block;
  width: 10%;
  height: 14px;
  background-color: #3f51b5;
}

.progress_val {
  display: inline-block;
}

<div class="progress">
  <div class="progress_bar"></div>
</div>
<div class="progress_val">10%</div>

2 个回答

Voted

Yuri · Answer 1 · 2020-08-15T19:24:14Z

JS 有一个特殊的requestAnimFrame函数，可以让你创建动画效果。

// Указываем начальное время анимации
var start = performance.now();

requestAnimationFrame(function animate(time) {
  // Высчитываем процент завершённости: высчитываем сколько прошло времени и делим на нужную продолжительность
  var timeFraction = (time - start) / 3000;
  if (timeFraction > 1) timeFraction = 1;

  // Получаем элементы
  var Bar = document.querySelector('.progress_bar'),
      Val = document.querySelector('.progress_val');
    
  // Указываем начальное значение
  var oldVal = 10,
  // Указываем новое значение
      newVal = 80;
        
  // Применяем
  Bar.style.width = (oldVal + ((newVal - oldVal) * timeFraction)) + '%';
  Val.innerHTML = (oldVal + ((newVal - oldVal) * timeFraction)) + '%';

  // Если анимация незаконченна, запускаем новый шаг
  if (timeFraction < 1) {
    requestAnimationFrame(animate);
  };
});

.progress {
  display: inline-block;
  width: 200px;
  height: 12px;
  border: 1px solid black;
  border-radius: 6px;
  overflow: hidden;
}

.progress_bar {
  display: inline-block;
  width: 10%;
  height: 14px;
  background-color: #3f51b5;
}

.progress_val {
  display: inline-block;
}

<div class="progress">
  <div class="progress_bar"></div>
</div>
<div class="progress_val">10%</div>

了解有关使用此函数创建动画的更多信息：https ://learn.javascript.ru/js-animation 。

您还应该使用 polyfill，因为。此功能仅在 IE10 中开始工作。填充物：

window.requestAnimFrame = (function(){
   return  window.requestAnimationFrame       ||
           window.webkitRequestAnimationFrame ||
           window.mozRequestAnimationFrame    ||
           function( callback ){
              window.setTimeout(callback, 1000 / 60);
           };
})();

或者您可以使用现成的插件。最简单的插件将适合您的问题。例如，您可以使用我的：https ://github.com/yuri-spivak/animations-in-javascript

new Animate({
  duration: 3000,
  step: function (p) {
    // Получаем элементы
    var Bar = document.querySelector('.progress_bar'),
        Val = document.querySelector('.progress_val');
    
    // Указываем начальное значение
    var oldVal = 10,
    // Указываем новое значение
        newVal = 80;
        
    // Применяем
    Bar.style.width = (oldVal + ((newVal - oldVal) * p)) + '%';
    Val.innerHTML = Math.round(oldVal + ((newVal - oldVal) * p)) + '%';
  }
});

.progress {
  display: inline-block;
  width: 200px;
  height: 12px;
  border: 1px solid black;
  border-radius: 6px;
  overflow: hidden;
}
.progress_bar {
  display: inline-block;
  width: 10%;
  height: 14px;
  background-color: #3f51b5;
}

.progress_val {
  display: inline-block;
}

<script src="data:application/javascript;base64,KGZ1bmN0aW9uKCl7ZnVuY3Rpb24gYShyLHMpe3JldHVybiAxLTMqcyszKnJ9ZnVuY3Rpb24gYihyLHMpe3JldHVybiAzKnMtNipyfWZ1bmN0aW9uIGMocil7cmV0dXJuIDMqcn1mdW5jdGlvbiBkKHIscyx0KXtyZXR1cm4oKGEocyx0KSpyK2Iocyx0KSkqcitjKHMpKSpyfWZ1bmN0aW9uIGUocixzLHQpe3JldHVybiAzKmEocyx0KSpyKnIrMipiKHMsdCkqcitjKHMpfWZ1bmN0aW9uIGcocixzLHQpe3ZhciB1LHYsdz0wO2RvIHY9cysodC1zKS8yLHU9ZCh2LG1YMSxtWDIpLXIsMDx1P3Q9djpzPXY7d2hpbGUoTWF0aC5hYnModSk+MWUtNyYmKyt3PDEwKTtyZXR1cm4gdn1pZih3aW5kb3cucmVxdWVzdEFuaW1GcmFtZT1mdW5jdGlvbigpe3JldHVybiB3aW5kb3cucmVxdWVzdEFuaW1hdGlvbkZyYW1lfHx3aW5kb3cud2Via2l0UmVxdWVzdEFuaW1hdGlvbkZyYW1lfHx3aW5kb3cubW96UmVxdWVzdEFuaW1hdGlvbkZyYW1lfHxmdW5jdGlvbihyKXt3aW5kb3cuc2V0VGltZW91dChyLDFlMy82MCl9fSgpLCExPT0ncGVyZm9ybWFuY2UnaW4gd2luZG93JiYod2luZG93LnBlcmZvcm1hbmNlPXt9KSwoRGF0ZS5ub3c9RGF0ZS5ub3d8fGZ1bmN0aW9uKCl7cmV0dXJuIG5ldyBEYXRlKCkuZ2V0VGltZSgpfSwhMT09J25vdydpbiB3aW5kb3cucGVyZm9ybWFuY2UpKXt2YXIgaD1EYXRlLm5vdygpO3BlcmZvcm1hbmNlLnRpbWluZyYmcGVyZm9ybWFuY2UudGltaW5nLm5hdmlnYXRpb25TdGFydCYmKGg9cGVyZm9ybWFuY2UudGltaW5nLm5hdmlnYXRpb25TdGFydCksd2luZG93LnBlcmZvcm1hbmNlLm5vdz1mdW5jdGlvbigpe3JldHVybiBEYXRlLm5vdygpLWh9fUFycmF5LmlzQXJyYXl8fChBcnJheS5pc0FycmF5PWZ1bmN0aW9uKHIpe3JldHVybidbb2JqZWN0IEFycmF5XSc9PT1PYmplY3QucHJvdG90eXBlLnRvU3RyaW5nLmNhbGwocil9KTt2YXIgbj0xMSxvPTEvKG4tMSkscD0nRmxvYXQzMkFycmF5J2luIHRoaXMscT1mdW5jdGlvbihyLHMsdCx1KXtmdW5jdGlvbiB2KEcsSCl7Zm9yKHZhciBKLEk9MDtJPDQ7KytJKXtpZihKPWUoSCxyLHQpLDA9PT1KKXJldHVybiBIO3ZhciBLPWQoSCxyLHQpLUc7SC09Sy9KfXJldHVybiBIfWZ1bmN0aW9uIHcoKXtmb3IodmFyIEc9MDtHPG47KytHKURbR109ZChHKm8scix0KX1mdW5jdGlvbiB4KEcpe2Zvcih2YXIgSD0wLEk9MTtJIT1uLTEmJkRbSV08PUc7KytJKUgrPW87LS1JO3ZhciBLPShHLURbSV0pLyhEW0krMV0tRFtJXSksTD1IK0sqbyxNPWUoTCxyLHQpO3JldHVybiBNPj0xZS0zP3YoRyxMKTowPT09TT9MOmcoRyxILEgrbyl9ZnVuY3Rpb24geSgpe0U9ITAsKHIhPXN8fHQhPXUpJiZ3KCl9aWYoNCE9PWFyZ3VtZW50cy5sZW5ndGgpdGhyb3cgbmV3IEVycm9yKCdCZXppZXJFYXNpbmcgcmVxdWlyZXMgNCBhcmd1bWVudHMuJyk7Zm9yKHZhciB6PTA7ND56OysreilpZignbnVtYmVyJyE9dHlwZW9mIGFyZ3VtZW50c1t6XXx8aXNOYU4oYXJndW1lbnRzW3pdKXx8IWlzRmluaXRlKGFyZ3VtZW50c1t6XSkpdGhyb3cgbmV3IEVycm9yKCdCZXppZXJFYXNpbmcgYXJndW1lbnRzIHNob3VsZCBiZSBpbnRlZ2Vycy4nKTtpZigwPnJ8fDE8cnx8MD50fHwxPHQpdGhyb3cgbmV3IEVycm9yKCdCZXppZXJFYXNpbmcgeCB2YWx1ZXMgbXVzdCBiZSBpbiBbMCwgMV0gcmFuZ2UuJyk7dmFyIEQ9cD9uZXcgRmxvYXQzMkFycmF5KG4pOkFycmF5KG4pLEU9ITE7cmV0dXJuIGZ1bmN0aW9uKEcpe3JldHVybiBFfHx5KCkscj09PXMmJnQ9PT11P0c6MD09PUc/MDoxPT09Rz8xOmQoeChHKSxzLHUpfX07d2luZG93LmFuaW1hdGVMaXN0PVtdLHdpbmRvdy5hbmltYXRlU3RvcD1mdW5jdGlvbihyKXtyLnN0b3AoKX0sd2luZG93LmFuaW1hdGVQYXVzZT1mdW5jdGlvbihyKXtyLnBhdXNlKCl9LHdpbmRvdy5hbmltYXRlUGxheT1mdW5jdGlvbihyKXtyLnBsYXkoKX0sd2luZG93LkFuaW1hdGU9ZnVuY3Rpb24ocil7dmFyIHM9dGhpcztzLnN0YXJ0VGltZT1wZXJmb3JtYW5jZS5ub3coKSxzLnJlc29sdXRpb249ITAscy5wYXVzZT0hMSxzLnBhdXNlVGltZT0wLHIuZHVyYXRpb249L15cZCskLy50ZXN0KHIuZHVyYXRpb24pPytyLmR1cmF0aW9uOjEyMDA7dmFyIHQ9ZnVuY3Rpb24odSl7aWYocy5yZXNvbHV0aW9uKXt2YXIgdj0odS1zLnN0YXJ0VGltZSkvci5kdXJhdGlvbitzLnBhdXNlVGltZTtpZigxPHYmJih2PTEpLDA+diYmKHY9MCksITA9PT1zLnBhdXNlKXJldHVybiB2b2lkKHMucGF1c2VUaW1lPXYpO3ZhciB3PWZ1bmN0aW9uKCl7cmV0dXJuIEFycmF5LmlzQXJyYXkoci5lYXNpbmcpP25ldyBxKHIuZWFzaW5nWzBdLHIuZWFzaW5nWzFdLHIuZWFzaW5nWzJdLHIuZWFzaW5nWzNdKSh2KTonZWFzZSc9PT1yLmVhc2luZz9uZXcgcSgwLjI1LDAuMSwwLjI1LDEpKHYpOidlYXNlLWluJz09PXIuZWFzaW5nP25ldyBxKDAuNDIsMCwxLDEpKHYpOidlYXNlLW91dCc9PT1yLmVhc2luZz9uZXcgcSgwLDAsMC41OCwxKSh2KTonZWFzZS1pbi1vdXQnPT09ci5lYXNpbmc/bmV3IHEoMC40MiwwLDAuNTgsMSkodik6dn0oKTtyLnN0ZXAmJidmdW5jdGlvbic9PXR5cGVvZiByLnN0ZXAmJnIuc3RlcCh3KSwxPT09diYmKCExIT09ci5saXN0JiZ3aW5kb3cuYW5pbWF0ZUxpc3Quc3BsaWNlKHdpbmRvdy5hbmltYXRlTGlzdC5pbmRleE9mKHQpLDEpLHIuY29tcGxldGUmJidmdW5jdGlvbic9PXR5cGVvZiByLmNvbXBsZXRlJiZyLmNvbXBsZXRlKCksci5kb25lJiYnZnVuY3Rpb24nPT10eXBlb2Ygci5kb25lJiZyLmRvbmUoKSksMT52JiZyZXF1ZXN0QW5pbWF0aW9uRnJhbWUodCl9fTtyZXR1cm4gcmVxdWVzdEFuaW1hdGlvbkZyYW1lKHQpLCExIT09ci5saXN0JiZ3aW5kb3cuYW5pbWF0ZUxpc3QucHVzaCh0KSxyLnN0YXJ0JiYnZnVuY3Rpb24nPT10eXBlb2Ygci5zdGFydCYmci5zdGFydCgpLHtzdG9wOmZ1bmN0aW9uKCl7cy5yZXNvbHV0aW9uPSExLCExIT09ci5saXN0JiZ3aW5kb3cuYW5pbWF0ZUxpc3Quc3BsaWNlKHdpbmRvdy5hbmltYXRlTGlzdC5pbmRleE9mKHQpLDEpLHIuZG9uZSYmJ2Z1bmN0aW9uJz09dHlwZW9mIHIuZG9uZSYmci5kb25lKCl9LHBhdXNlOmZ1bmN0aW9uKCl7cy5wYXVzZT0hMH0scGxheTpmdW5jdGlvbigpe3Muc3RhcnRUaW1lPXBlcmZvcm1hbmNlLm5vdygpLHMucGF1c2U9ITEscmVxdWVzdEFuaW1hdGlvbkZyYW1lKHQpfSxwYXJhbWV0ZXJzOnJ9fX0pKCk7"></script>

<div class="progress">
  <div class="progress_bar"></div>
</div>
<div class="progress_val">10%</div>

step- 在动画的每一步调用并返回动画完成的百分比

Yuri · Answer 2 · 2020-08-15T20:32:46Z

有一个选项可以使用 CSS 获得所需的结果，但最好不要使用它，因为。并非所有浏览器都支持更改动画contentybefore并且通常非常昂贵

.progress {
  display: inline-block;
  width: 200px;
  height: 12px;
  border: 1px solid black;
  border-radius: 6px;
  overflow: hidden;
}

.progress_bar {
  display: inline-block;
  width: 10%;
  height: 14px;
  background-color: #3f51b5;
  animation-fill-mode: forwards;
  animation-name: newwidth;
  animation-duration: 3s;
}

@keyframes newwidth {
    from {width: 10%;}
    to {width: 80%;}
}

.progress_val {
  display: inline-block;
}
.progress_val:before {
  content: '10%';
  animation-fill-mode: forwards;
  animation-name: newbefore;
  animation-duration: 3s;
}

@keyframes newbefore {
    from {content: '10%';}
    1.4% {content: "11%";}
    2.8% {content: "12%";}
    4.2% {content: "13%";}
    5.6% {content: "14%";}
    7% {content: "15%";}
    8.4% {content: "16%";}
    9.8% {content: "17%";}
    11.2% {content: "18%";}
    12.6% {content: "19%";}
    14% {content: "20%";}
    15.4% {content: "21%";}
    16.8% {content: "22%";}
    18.2% {content: "23%";}
    19.6% {content: "24%";}
    21% {content: "25%";}
    22.4% {content: "26%";}
    23.8% {content: "27%";}
    25.2% {content: "28%";}
    26.6% {content: "29%";}
    28% {content: "30%";}
    29.4% {content: "31%";}
    30.8% {content: "32%";}
    32.2% {content: "33%";}
    33.6% {content: "34%";}
    35% {content: "35%";}
    36.4% {content: "36%";}
    37.8% {content: "37%";}
    39.2% {content: "38%";}
    40.6% {content: "39%";}
    42% {content: "40%";}
    43.4% {content: "41%";}
    44.8% {content: "42%";}
    46.2% {content: "43%";}
    47.6% {content: "44%";}
    49% {content: "45%";}
    50.4% {content: "46%";}
    51.8% {content: "47%";}
    53.2% {content: "48%";}
    54.6% {content: "49%";}
    56% {content: "50%";}
    57.4% {content: "51%";}
    58.8% {content: "52%";}
    60.2% {content: "53%";}
    61.6% {content: "54%";}
    63% {content: "55%";}
    64.4% {content: "56%";}
    65.8% {content: "57%";}
    67.2% {content: "58%";}
    68.6% {content: "59%";}
    70% {content: "60%";}
    71.4% {content: "61%";}
    72.8% {content: "62%";}
    74.2% {content: "63%";}
    75.6% {content: "64%";}
    77% {content: "65%";}
    78.4% {content: "66%";}
    79.8% {content: "67%";}
    81.2% {content: "68%";}
    82.6% {content: "69%";}
    84% {content: "70%";}
    85.4% {content: "71%";}
    86.8% {content: "72%";}
    88.2% {content: "73%";}
    89.6% {content: "74%";}
    91% {content: "75%";}
    92.4% {content: "76%";}
    93.8% {content: "77%";}
    95.2% {content: "78%";}
    96.6% {content: "79%";}
    to {content: '80%';}
}

<div class="progress">
  <div class="progress_bar"></div>
</div>
<div class="progress_val"></div>

没有 jQuery 的动画

Python 3.6 - 安装 MySQL (Windows)

C++ 编写程序“计算单个岛屿”。填充一个二维数组 12x12 0 和 1

返回指针的函数

我使用 django 管理面板添加图像，但它没有显示

这些条目是什么意思，它们的完整等效项是什么样的

浏览器仍然缓存文件数据

在 Excel VBA 中激活工作表的问题

为什么内置类型中包含复数而小数不包含？

获得唯一途径

告诉我一个像幻灯片一样创建滚动的库

没有 jQuery 的动画

2 个回答

相关问题