Родительский стиль зависит от динамического значения ребенка

Question

Я использую countUp, который подсчитывает число. См. demo. У меня есть набор Bootstrap progress bars, что я хотел бы оживить показанное число и ширину полосы.

Markup:

<div class="progress"> 
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> 
    <span class="js-countup" data-count="80"></span>% 
    </div> 
</div> 

Числа анимировать хорошо с:

$.each($('.js-countup'), function() { 
    var count = $(this).data('count'), 
    numAnim = new CountUp(this, 0, count); 

    numAnim.start(); 
}); 

Теперь мне нужно анимировать style="width" в progress-bar. Как я могу сделать ширину зависимой от значения в span.js-countup, так как число увеличивает ширину родительского элемента также увеличивается?

Редактировать подсчитанное число применяется в пределах диапазона, как так <span class="js-countup" data-count="80">0 to 80</span>%

Редактировать Hacky решение было бы, чтобы вызвать переход CSS3 на ширину бар равной продолжительности, как Countup. Хотя это может сработать для моей точной проблемы, оно не будет отвечать за зависимость от ребенка/родителя.

Answer 1

Я искал MutationObserver, setInterval() и т. Д., И ничто не является слишком элегантным или достаточно простым для того, что вы делаете. Если вы не возражаете против добавления плагина jQuery, попробуйте jQuery-Watch. Он отслеживает элемент для изменений свойств, атрибутов, HTML и т. Д.

Приведем следующее, но вы можете уточнить его. Это немного нервничаю, чтобы начать:

$(".js-countup").watch({ 
    properties: "prop_innerHTML", 
    watchChildren: true, 
    callback: function (data, i) { 
    $('.progress-bar').css('width',data.vals[i] + '%'); 
    } 
}); 

Удаление начальной ширины на панели прогресса помогает, но вы должны установить min-width согласно Bootstrap's documentation for progress bar labels поэтому процент всегда имеет фон.

Here's a fiddle for you, но он не будет работать в Chrome, потому что я напрямую связан с необработанными файлами в GitHub (Firefox и Safari работают нормально).

Edit: Я updated the fiddle с min-width из 3em, удален % символа с этикетки и передал его в CountUp() как суффикс, так что вы не пустой процента видимого на вашем прогресс баре. CountUp() теперь выглядит следующим образом:

numAnim = new CountUp(this, 0, count, 0, 2.5, { suffix : '%' }); 

Edit 2: Этот вопрос стал немного наркомании для меня. Используя подход CSS-анимации, вы можете сэкономить себе разметку, полностью исключив элемент countup и используя атрибуты aria на панели выполнения. Затем просто установите ширину полосы выполнения, чтобы она соответствовала aria-valuenow, когда вы запускаете свой счетчик.

Updated fiddle.

HTML

<div class="progress"> 
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"> 
    </div> 
</div> 

CSS

.progress-bar { 
    min-width: 3em; 
    -webkit-transition: width 2.5s ease-in-out; 
    -moz-transition: width 2.5s ease-in-out; 
     -o-transition: width 2.5s ease-in-out; 
      transition: width 2.5s ease-in-out; 
} 

JQuery

$.each($('.progress-bar'), function() { 
    var count = $(this).attr('aria-valuenow'), 
    numAnim = new CountUp(this, 0, count, 0, 2.5, { suffix : '%' }); 
    $(this).css('width', count + '%'); 
    numAnim.start(); 
}); 

Редактирование 3: countUp.js выдаст ошибки, если значения равны нулю или 0. Here's an updated fiddle с некоторыми основными предупреждениями об ошибке и добавлением атрибута данных продолжительности для большей детализации.