Хочу сделать анимацию длины div блока
с рандомной финальной точкой
и alternate-reverse
. Но я не представляю как это сделать, и возможно ли это вообще. Ведь придется каждый раз пересоздавать @keyframes
. Наверно и с svg
придется постоянно вносить изменения в css
. Есть какое-то решение или мне лучше забыть про эту идею?
-
2на JavaScript можно– Михаил Камахин9 фев 2021 в 7:11
-
Используя таймаут?– Vanya9 фев 2021 в 7:18
-
requestAnimationFrame learn.javascript.ru/js-animation– Михаил Камахин9 фев 2021 в 7:19
-
В jq поддержку так и не вернули?– Vanya9 фев 2021 в 7:27
-
Какую поддержку, вы о чём?– Михаил Камахин9 фев 2021 в 7:29
|
Показать ещё 2 комментария
2 ответа
Вот такое, может, натолкнёт вас на нужные мысли:
Использована библиотека GSAP
const lineRed = document.querySelector('.line-red');
const btn = document.querySelector('.btn');
const lineRedMaxWidth = parseFloat(window.getComputedStyle(lineRed)['max-width']);
class RandomNumber {
constructor(numbers) {
this.numbers = numbers.slice();
}
random(numbers) { // генерация рандомного числа на основе длины массива
const randomIdx = Math.floor(Math.random() * numbers.length);
const randomNumber = numbers[randomIdx];
return {num: randomNumber, idx: randomIdx};
};
get nextNumber() {
const numbers = this.numbers.slice();
let randomNumber = this.random(numbers);
if (this.lastRdnNumber && this.lastRdnNumber.num === randomNumber.num) {
// this.lastRdnNumber cуществует и прошлое число равняется текущему сгенерированному
numbers.splice(randomNumber.idx, 1); // вырезать число из массива, которое уже было
randomNumber = this.random(numbers);
}
this.lastRdnNumber = randomNumber;
return randomNumber.num;
}
get lastNumber() {
if (this.lastRdnNumber) {
return this.lastRdnNumber.num;
} else {
return 0;
}
}
}
function completeTl() {
btn.classList.remove('noActive');
tlCompleteBool = true;
}
const numbers = [0.2, 0.4, 0.7, 0.6, 0.1, 1];
const randomNumber = new RandomNumber(numbers);
let tlCompleteBool = true;
const tl = gsap.timeline({defaults: {duration: 0.5}})
tl.from(lineRed, {width: 0, duration: 0});
btn.addEventListener('click', (e) => {
if (tlCompleteBool === true) {
tlCompleteBool = false;
btn.classList.add('noActive');
const lastNumber = randomNumber.lastNumber;
const nextNumber = randomNumber.nextNumber;
tl.to(lineRed, {width: `${lineRedMaxWidth * nextNumber}%`})
.to(lineRed, {width: `${lineRedMaxWidth * lastNumber}%`})
.to(lineRed, {width: `${lineRedMaxWidth * nextNumber}%`, onComplete: completeTl});
}
});
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
}
.line-wrapper {
max-width: 400px;
min-height: 30px;
position: relative;
z-index: 1;
--heightLine: 2px;
}
.line-black {
background-color: black;
height: var(--heightLine);
width: 90%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.line-red {
position: absolute;
--left: 4%;
--maxWidth: calc( 100% - (var(--left) * 2));
left: var(--left);
max-width: var(--maxWidth);
width: 0;
top: 50%;
height: calc( var(--heightLine) * 5);
z-index: 2;
background-color: red;
border-radius: calc( var(--heightLine) * 2.5);
transform: translate(0, -50%);
transform-origin: 0 0;
}
.btn {
outline: none;
border: none;
font-family: inherit;
font-size: inherit;
background-color: black;
color: white;
display: inline-block;
padding: 5px 10px;
user-select: none;
cursor: pointer;
border-radius: 10px;
transition-timing-function: ease;
transition-duration: 0.2s;
transition-property: box-shadow, color, opacity;
}
.btn.noActive {
cursor: not-allowed;
opacity: 0.5;
}
.btn:not(.noActive):hover {
box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
}
.btn:not(.noActive):active {
color: #ffc107;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<div class="line-wrapper">
<div class="line-black"></div>
<div class="line-red"></div>
</div>
<button class="btn">Анимируй</button>
Если я вас правильно понял, то такую анимацию на чистом css сделать нельзя. Предлагаю своё решение на JavaScript:
document.addEventListener("DOMContentLoaded", () => {
const randomFinal = ["35", "50", "90"];
const randomNumber = Math.floor(Math.random() * randomFinal.length);
const randomPercent = randomFinal[randomNumber];
document.querySelector(".progress-line").animate([
// keyframes
{ width: `${randomPercent}%` },
], {
// timing options
duration: 1000,
iterations: 2, // "Infinity"
direction: "alternate-reverse",
fill: "both",
})
});
* {
box-sizing: border-box;
}
.site-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.progress {
position: relative;
width: 200px;
height: 3px;
background: #000;
}
.progress-line {
display: inline-block;
content: '';
position: absolute;
top: -50%;
left: 0;
width: 0%;
height: 200%;
border-radius: 7px;
background-color: red;
}
<div class="site-container">
<div class="progress">
<div class="progress-line"></div>
</div>
</div>