Анимация для Inner HTML (Anime.js или альтернативы)

190

15 февраля 2018, 16:46

Мне нужно сделать калькулятор для рассчёта стоимости видеоролика. Есть такой код:

function calc() { 
  //получаем ссылку на элемент Select (Тип дизайна) 
  var type_design = document.getElementById("type_design"); 
  //получаем ссылку на чекбокс (Требуется верстка?) 
  var is_html = document.getElementById("is_html"); 
  //получаем ссылку на элемент input (Кол-во вариантов) 
  var count = document.getElementById("count"); 
  //получаем ссылку на элемент span, в него будем писать стоимость дизайна 
  var result = document.getElementById("result"); 
 
  var price = 0; 
  price += parseInt(type_design.options[type_design.selectedIndex].value); 
  price += (is_html.checked == true) ? parseInt(is_html.value) : 0; 
  price = parseInt(count.value) * price; 
 
  result.innerHTML = price; 
}

<select onchange="calc()" id="type_design"> 
      <option value="0">Выбрать</option> 
      <option value="5000">Простой дизайн сайта</option> 
      <option value="7000">Сложный дизайн сайта</option> 
      <option value="10000">Дизайн интернет-магазина</option> 
    </select><br/> 
<input type="checkbox" onchange="calc()" value="3000" id="is_html" /> 
<label for="is_html">Требуется верстка?</label> 
<br/> Кол-во вариантов: <input type="text" id="count" value="1" onchange="calc()" /> 
<div>Стоимость дизайна сайта: 
  <div id="result">0</div> руб.</div>

Он отлично считает, но мне необходимо анимировать увеличение/уменьшение итоговой стоимости. Пробовал использовать Anime.js. Вроде бы там просто всё в примерах, но у меня не получается.

Answer 1

Я уже самостоятельно нашёл ответ :) Кому интересно:

function calc() { 
  //получаем ссылку на элемент Select (Тип дизайна) 
  var type_design = document.getElementById("type_design"); 
  //получаем ссылку на чекбокс (Требуется верстка?) 
  var is_html = document.getElementById("is_html"); 
  //получаем ссылку на элемент input (Кол-во вариантов) 
  var count = document.getElementById("count"); 
  //получаем ссылку на элемент span, в него будем писать стоимость дизайна 
  var result = document.getElementById("result"); 
 
  var price = 0; 
  price += parseInt(type_design.options[type_design.selectedIndex].value); 
  price += (is_html.checked == true) ? parseInt(is_html.value) : 0; 
  price = parseInt(count.value) * price; 
 
  $.Tween.propHooks.number = { 
    get: function(tween) { 
      var num = tween.elem.innerHTML.replace(/^[^\d-]+/, ''); 
      return parseFloat(num) || 0; 
    }, 
 
    set: function(tween) { 
      var opts = tween.options; 
      tween.elem.innerHTML = (opts.prefix || '') + 
        tween.now.toFixed(opts.fixed || 0) + 
        (opts.postfix || ''); 
    } 
  }; 
 
  $('#result').animate({ 
    number: price 
  }, 'slow'); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select onchange="calc()" id="type_design"> 
      <option value="0">Выбрать</option> 
      <option value="5000">Простой дизайн сайта</option> 
      <option value="7000">Сложный дизайн сайта</option> 
      <option value="10000">Дизайн интернет-магазина</option> 
    </select><br/> 
<input type="checkbox" onchange="calc()" value="3000" id="is_html" /> 
<label for="is_html">Требуется верстка?</label> 
<br/> Кол-во вариантов: <input type="text" id="count" value="1" onchange="calc()" /> 
<div>Стоимость дизайна сайта: 
  <div id="result">0</div> руб.</div>