<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
html, body {
height: 100%;
}
body {
font-family: Arial;
margin: 0;
padding: 0;
}
.wrapper {
width: 50%;
margin: 1% auto;
}
.outer {
position: relative;
}
.slideUI {
width: 0;
text-align: center;
border: 3px solid #ccc;
display: none;
overflow: hidden;
position: absolute;
}
.button {
margin-top: 10px;
}
.clone {
position: relative;
left: -99999;
z-index: -99999;
display: block;
height: auto;
width: auto;
border: 3px solid #ccc;
}
</style>
</head>
<body>
<div class="wrapper">
<button class="button" onclick="slideUI(this.nextElementSibling.firstElementChild, 1000)">Toggle</button>
<div class="outer">
<div class="slideUI">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Vitae eveniet nesciunt suscipit consequuntur id rem, earum totam eos eligendi labore sit illo fuga cumque neque ipsa fugiat quae sunt omnis?</p>
</div>
</div>
</div>
<script>
let counter = 0;
let isAnimated = false;
function animate({timing, draw, duration}) {
let start = performance.now();
requestAnimationFrame(function doAnimation(time) {
let timeFraction = (time - start) / duration;
if (timeFraction > 1) timeFraction = 1;
let progress = timing(timeFraction);
draw(progress);
if (timeFraction < 1) {
requestAnimationFrame(doAnimation);
}
});
}
function getCloneSizes(elem) {
const sizes = {};
const borderWidth = (parseInt(getComputedStyle(elem).borderWidth) * 2);
const clone = elem.cloneNode(true);
clone.classList.add('clone');
elem.parentNode.append(clone);
sizes.width = clone.offsetWidth - borderWidth;
sizes.height = clone.offsetHeight - borderWidth;
clone.remove();
return sizes;
}
function slideUI(elem, duration) {
if (isAnimated) return false;
isAnimated = true;
const sizes = getCloneSizes(elem);
elem.style.display = 'block';
elem.style.height = sizes.height + 'px';
elem.style.width = sizes.width + 'px'
elem.style.left = `-${sizes.width}px`;
elem.style.clip = `rect(auto, 0px, auto, 0px)`;
let start = parseInt(elem.style.left);
animate({
duration: duration,
timing(timeFraction) {
return timeFraction;
},
draw(progress) {
let elemWidth = sizes.width + (parseInt(getComputedStyle(elem).borderWidth) * 2);
let t = progress * elemWidth;
if (counter % 2 != 0) {
elem.style.clip = `rect(auto, ${t}px, auto, ${elemWidth - t}px)`;
elem.style.left = start + t + 'px';
} else {
elem.style.clip = `rect(auto, ${elemWidth}px, auto, ${t}px)`;
elem.style.left = 0 - t + 'px';
}
}
});
counter++;
isAnimated = false;
}
</script>
</body>
</html>
Почему не отменяется повторное нажатие во время анимации? Здесь нет ассинхронщины!?
if (isAnimated) return false;