3
Я пытаюсь сделать индикатор индикатора прогресса с помощью анимации CSS. Пожалуйста, обратитесь к связанному JSBin. Поведение, которое я пытаюсь достичь, - это когда пользователь нажимает на stage3 после этапа1, ширина div должна увеличиваться с текущих 30% до 100% и не начинаться с 0%, как сейчас. Я знаю, установил ли значение 0% как ширину: 30%, я могу это получить. Но это будет не так хорошо, если у меня будет много этапов. Я хочу, чтобы анимация начиналась с конечной ширины последнего этапа до ширины, указанной на новом этапе.Как установить 0% css ключевых кадров как текущее значение css для элемента?
document.getElementById('stage1').addEventListener('click', function() {
document.getElementById('progress').classList.add('stage1');
}, false);
document.getElementById('stage2').addEventListener('click', function() {
document.getElementById('progress').classList.add('stage2');
}, false);
document.getElementById('stage3').addEventListener('click', function() {
document.getElementById('progress').classList.add('stage3');
}, false);.progress-wrapper {
height: 10px;
width: 400px;
background-color: #BBDEFB;
}
#progress {
background-color: #AADE00;
height: 10px;
width: 0;
}
.stage1 {
animation-name: stage1;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes stage1 {
to {
width: 30%;
}
}
.stage2 {
animation-name: stage2;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes stage2 {
to {
width: 70%;
}
}
.stage3 {
animation-name: stage3;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes stage3 {
to {
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="progress-wrapper">
<div id="progress"></div>
</div>
<pre>
</pre>
<button id="stage1">stage1</button>
<button id="stage2">stage2</button>
<button id="stage3">stage3</button>
</body>
</html>
При наличии нескольких анимаций связана с использованием те же свойства, CSS будет использовать последнюю версию и переопределить последний. Это почти похоже на это поведение: http://stackoverflow.com/questions/32224802/extend-the-final-state-of-the-first-animation-for-translated-element –
@ManojKumar Спасибо. Мне придется подумать о другом подходе, есть просто слишком много комбинаций начального значения и конечного значения для ширины. – nandwana92
Да, я предлагаю вам использовать библиотеку Greensock Tweenmax/Timelinemax. Это легко и соответствует вашим требованиям. –