#javascript #html #css #progress-bar
Вопрос:
У меня есть этот круглый индикатор выполнения, который показывает ход выполнения выполненных задач. При изменении хода выполнения индикатор увеличивается/уменьшается в течение 0,5 с. Сама панель состоит из 2 половинок, поэтому в моем JS мне пришлось добавить некоторые дополнительные функции для задержки и изменения времени перехода, если, например, у вас будет неравномерное количество общих задач.
Теперь все это работает просто отлично, пока я «не восстановлю» индикатор выполнения (нажав кнопку «перезагрузить»), просто очистив оболочку панели и добавив все файлы и необходимые данные для повторного отображения панели с ее текущим прогрессом. На данный момент, всякий раз, когда индикатор выполнения достигает середины, по какой-то причине переход не такой плавный, как до «перезагрузки», но если вы снова обновите страницу, переход (в середине) будет в порядке. Я понятия не имею, почему это происходит…
Вот JSFiddle
ОБНОВЛЕНИЕ В разделе «при перезагрузке» в JS я забыл повторно инициализировать «bar_transition = $(‘.circle .bar_transition .sub-прогресс’)»
function updateSubtaskProgressBar(subs_completed, total_subs, progress_bar_transition, toggle, mod, reload_btn) {
var left_side = $(".sub-progress-bar_transition .circle .left .sub-progress");
var right_side = $(".sub-progress-bar_transition .circle .right .sub-progress");
progress = subs_completed / total_subs * 360;
transition = 500;
delay = transition / 2;
rot_reminder = 0;
if (progress < 180) {
rot_right = 0;
right_side.css({
'transform': 'rotate(' rot_right 'deg)'
});
rot_left = progress
rot_reminder = 180 - rot_left
if (rot_reminder != 0 amp;amp; mod != 0 amp;amp; toggle == 0) {
progress_bar_transition.css({
'transition': 'all ' delay / 1000 's ease-in'
});
setTimeout(function () {
progress_bar_transition.css({
'transition': 'all ' delay / 1000 's ease-out'
});
left_side.css({
'transform': 'rotate(' rot_left 'deg)'
});
}, delay);
toggle = 1 - toggle
reload_btn.data('toggle', toggle)
} else {
progress_bar_transition.css({
'transition': 'all ' transition / 1000 's ease-in-out'
});
left_side.css({
'transform': 'rotate(' rot_left 'deg)'
});
}
} else {
rot_left = 180;
left_side.css({
'transform': 'rotate(' rot_left 'deg)'
});
rot_right = progress - 180;
rot_reminder = rot_right
if (rot_reminder != 0 amp;amp; mod != 0 amp;amp; toggle == 1) {
progress_bar_transition.css({
'transition': 'all ' delay / 1000 's ease-in'
});
setTimeout(function () {
progress_bar_transition.css({
'transition': 'all ' delay / 1000 's ease-out'
});
right_side.css({
'transform': 'rotate(' rot_right 'deg)'
});
}, delay);
toggle = 1 - toggle
reload_btn.data('toggle', toggle)
} else {
progress_bar_transition.css({
'transition': 'all ' transition / 1000 's ease-in-out'
});
right_side.css({
'transform': 'rotate(' rot_right 'deg)'
});
}
}
}
function setSubtaskProgressBar(subs_completed, total_subs, bar_transition) {
modulo = 0;
current_progress = 0;
var left_side = $(".sub-progress-bar_transition .circle .left .sub-progress");
var right_side = $(".sub-progress-bar_transition .circle .right .sub-progress");
modulo = total_subs%2
current_progress = subs_completed / total_subs * 360;
var reload = $('.reload')
reload.data('completed', subs_completed)
reload.data('total', total_subs)
reload.data('modulo', modulo)
if (current_progress < 180) {
rot_left = current_progress
rot_right = 0
left_side.css({
'transform': 'rotate(' rot_left 'deg)'
});
reload.data('toggle', 1)
} else {
rot_left = 180
rot_right = current_progress - 180
left_side.css({
'transform': 'rotate(' rot_left 'deg)'
});
right_side.css({
'transform': 'rotate(' rot_right 'deg)'
});
reload.data('toggle', 0)
}
bar_transition.css({
'transition': 'none'
});
}
$(document).ready(function () {
subs_completed = 3;
total_subs = 5;
bar_transition = $('.circle .bar_transition .sub-progress')
number = $('.number')
number.html(subs_completed '/' total_subs)
setSubtaskProgressBar(subs_completed, total_subs, bar_transition)
$(document).on('click', '.add', function () {
subs_completed = 1
$('.number').html(subs_completed '/' total_subs)
reload = $('.reload')
reload.data('completed', subs_completed)
modulo = reload.data('modulo')
toggle = reload.data('toggle')
total = reload.data('total')
updateSubtaskProgressBar(subs_completed, total, bar_transition, toggle, modulo, reload)
})
$(document).on('click', '.remove', function () {
subs_completed -= 1;
$('.number').html(subs_completed '/' total_subs)
reload = $('.reload')
reload.data('completed', subs_completed)
modulo = reload.data('modulo')
toggle = reload.data('toggle')
total = reload.data('total')
updateSubtaskProgressBar(subs_completed, total, bar_transition, toggle, modulo, reload)
})
$(document).on('click', '.reload', function () {
num = $(this).data('completed') '/' $(this).data('total')
data = '<div class="subtask-circular-progress sub-progress-bar_transition" data-completed="' $(this).data('completed') '" data-total="' $(this).data('total') '" data-modulo="' $(this).data('modulo') '" data-toggle="' $(this).data('toggle') '"><div class="inner"></div><div class="number">' num '</div><div class="circle"><div class="bar_transition left"><div class="sub-progress"></div></div><div class="bar_transition right"><div class="sub-progress"></div></div></div></div>'
wrapper = $('.wrapper').empty();
wrapper.append(data)
setSubtaskProgressBar(subs_completed, total_subs, bar_transition)
console.log('reload')
})
});
body{
background-color: #333;
}
.subtask-circular-progress {
position: absolute;
left: 50%;
top: 40%;
height: 100px;
width: 100px;
background-color: red;
}
.subtask-circular-progress .inner {
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
border-radius: 100%;
background: #454545;
}
.subtask-circular-progress .number {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 15px;
font-weight: 500;
color: white;
}
.subtask-circular-progress .bar_transition {
position: absolute;
height: 100%;
width: 100%;
background: #fff;
-webkit-border-radius: 100%;
border-radius: 100%;
clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar_transition .sub-progress {
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
background: #4158d0;
transition: all 0.5s ease-in-out;
}
.circle .left .sub-progress {
transform: rotate(0deg);
}
.circle .right {
transform: rotate(180deg);
z-index: 3;
}
.circle .right .sub-progress {
transform: rotate(0deg);
}
.buttons{
position: absolute;
left: 50%;
top: 60%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="subtask-circular-progress sub-progress-bar_transition">
<div class="inner"></div>
<div class="number">100%</div>
<div class="circle">
<div class="bar_transition left">
<div class="sub-progress"></div>
</div>
<div class="bar_transition right">
<div class="sub-progress"></div>
</div>
</div>
</div>
</div>
<div class="d-flex buttons">
<button type="button" class="btn btn-success add"> </button>
<button type="button" class="btn btn-success remove ms-4">-</button>
<button type="button" class="btn btn-success reload ms-4" data-completed="" data-total="" data-modulo="" data-toggle="">reload</button>
</div>
Ответ №1:
Проблему было сложно найти, но вы ссылаетесь на bar_transition
глобальную переменную, после чего относительное содержимое DOM удаляется.
После замены DOM содержимое bar_transition
больше не отражает DOM, теряется.
Вам нужно вручную обновить содержимое переменной-это обратный вызов перезагрузки:
bar_transition = $('.circle .bar_transition .sub-progress');
function updateSubtaskProgressBar(subs_completed, total_subs, progress_bar_transition, toggle, mod, reload_btn) {
var left_side = $(".sub-progress-bar_transition .circle .left .sub-progress");
var right_side = $(".sub-progress-bar_transition .circle .right .sub-progress");
progress = subs_completed / total_subs * 360;
transition = 500;
delay = transition / 2;
rot_reminder = 0;
if (progress < 180) {
rot_right = 0;
right_side.css({
'transform': 'rotate(' rot_right 'deg)'
});
rot_left = progress
rot_reminder = 180 - rot_left
if (rot_reminder != 0 amp;amp; mod != 0 amp;amp; toggle == 0) {
progress_bar_transition.css({
'transition': 'all ' delay / 1000 's ease-in'
});
setTimeout(function () {
progress_bar_transition.css({
'transition': 'all ' delay / 1000 's ease-out'
});
left_side.css({
'transform': 'rotate(' rot_left 'deg)'
});
}, delay);
toggle = 1 - toggle
reload_btn.data('toggle', toggle)
} else {
progress_bar_transition.css({
'transition': 'all ' transition / 1000 's ease-in-out'
});
left_side.css({
'transform': 'rotate(' rot_left 'deg)'
});
}
} else {
rot_left = 180;
left_side.css({
'transform': 'rotate(' rot_left 'deg)'
});
rot_right = progress - 180;
rot_reminder = rot_right
if (rot_reminder != 0 amp;amp; mod != 0 amp;amp; toggle == 1) {
progress_bar_transition.css({
'transition': 'all ' delay / 1000 's ease-in'
});
setTimeout(function () {
progress_bar_transition.css({
'transition': 'all ' delay / 1000 's ease-out'
});
right_side.css({
'transform': 'rotate(' rot_right 'deg)'
});
}, delay);
toggle = 1 - toggle
reload_btn.data('toggle', toggle)
} else {
progress_bar_transition.css({
'transition': 'all ' transition / 1000 's ease-in-out'
});
right_side.css({
'transform': 'rotate(' rot_right 'deg)'
});
}
}
}
function setSubtaskProgressBar(subs_completed, total_subs, bar_transition) {
modulo = 0;
current_progress = 0;
var left_side = $(".sub-progress-bar_transition .circle .left .sub-progress");
var right_side = $(".sub-progress-bar_transition .circle .right .sub-progress");
modulo = total_subs%2
current_progress = subs_completed / total_subs * 360;
var reload = $('.reload')
reload.data('completed', subs_completed)
reload.data('total', total_subs)
reload.data('modulo', modulo)
if (current_progress < 180) {
rot_left = current_progress
rot_right = 0
left_side.css({
'transform': 'rotate(' rot_left 'deg)'
});
reload.data('toggle', 1)
} else {
rot_left = 180
rot_right = current_progress - 180
left_side.css({
'transform': 'rotate(' rot_left 'deg)'
});
right_side.css({
'transform': 'rotate(' rot_right 'deg)'
});
reload.data('toggle', 0)
}
bar_transition.css({
'transition': 'none'
});
}
$(document).ready(function () {
subs_completed = 3;
total_subs = 5;
bar_transition = $('.circle .bar_transition .sub-progress')
number = $('.number')
number.html(subs_completed '/' total_subs)
setSubtaskProgressBar(subs_completed, total_subs, bar_transition)
$(document).on('click', '.add', function () {
subs_completed = 1
$('.number').html(subs_completed '/' total_subs)
reload = $('.reload')
reload.data('completed', subs_completed)
modulo = reload.data('modulo')
toggle = reload.data('toggle')
total = reload.data('total')
updateSubtaskProgressBar(subs_completed, total, bar_transition, toggle, modulo, reload)
})
$(document).on('click', '.remove', function () {
subs_completed -= 1;
$('.number').html(subs_completed '/' total_subs)
reload = $('.reload')
reload.data('completed', subs_completed)
modulo = reload.data('modulo')
toggle = reload.data('toggle')
total = reload.data('total')
updateSubtaskProgressBar(subs_completed, total, bar_transition, toggle, modulo, reload)
})
$(document).on('click', '.reload', function () {
num = $(this).data('completed') '/' $(this).data('total')
data = '<div class="subtask-circular-progress sub-progress-bar_transition" data-completed="' $(this).data('completed') '" data-total="' $(this).data('total') '" data-modulo="' $(this).data('modulo') '" data-toggle="' $(this).data('toggle') '"><div class="inner"></div><div class="number">' num '</div><div class="circle"><div class="bar_transition left"><div class="sub-progress"></div></div><div class="bar_transition right"><div class="sub-progress"></div></div></div></div>'
wrapper = $('.wrapper').empty();
wrapper.append(data)
// Fix is here!
bar_transition = $('.circle .bar_transition .sub-progress');
setSubtaskProgressBar(subs_completed, total_subs, bar_transition)
console.log('reload')
})
});
body{
background-color: #333;
}
.subtask-circular-progress {
position: absolute;
left: 50%;
top: 40%;
height: 100px;
width: 100px;
background-color: red;
}
.subtask-circular-progress .inner {
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
border-radius: 100%;
background: #454545;
}
.subtask-circular-progress .number {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 15px;
font-weight: 500;
color: white;
}
.subtask-circular-progress .bar_transition {
position: absolute;
height: 100%;
width: 100%;
background: #fff;
-webkit-border-radius: 100%;
border-radius: 100%;
clip: rect(0px, 100px, 100px, 50px);
}
.circle .bar_transition .sub-progress {
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
background: #4158d0;
transition: all 0.5s ease-in-out;
}
.circle .left .sub-progress {
transform: rotate(0deg);
}
.circle .right {
transform: rotate(180deg);
z-index: 3;
}
.circle .right .sub-progress {
transform: rotate(0deg);
}
.buttons{
position: absolute;
left: 50%;
top: 60%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="subtask-circular-progress sub-progress-bar_transition">
<div class="inner"></div>
<div class="number">100%</div>
<div class="circle">
<div class="bar_transition left">
<div class="sub-progress"></div>
</div>
<div class="bar_transition right">
<div class="sub-progress"></div>
</div>
</div>
</div>
</div>
<div class="d-flex buttons">
<button type="button" class="btn btn-success add"> </button>
<button type="button" class="btn btn-success remove ms-4">-</button>
<button type="button" class="btn btn-success reload ms-4" data-completed="" data-total="" data-modulo="" data-toggle="">reload</button>
</div>
Комментарии:
1. Да, я смотрел на код Js и думал о том, что инициализируется в функции «готово», а что в «перезагрузке», а затем я заметил, что «bar_transition» отсутствует… В любом случае спасибо за решение 🙂