#javascript #css #animation
Вопрос:
Когда мы нажмем эту кнопку добавить, мы добавим новый куб, который немедленно выпадет, но если мы нажмем его очень быстро, выпадет слишком много кубов. Я хочу ограничить количество всего анимированного выпадающего куба.
Например, даже если мы очень быстро нажмем кнопку и на страницу будет добавлено 10 кубиков, выпадут только два кубика, а остальные должны подождать, пока они не закончатся.
Например, 3-й и 4-й кубики начнут выпадать, когда куб 1 и куб 2 закончат.
Я подумал, может быть, у нас может быть глобальная переменная общего количества анимированных кубов, и — это когда новый куб начинает и заканчивает анимацию, используйте setInterval, чтобы проверить, меньше ли переменная 2, но это не может сделать анимацию на основе порядка создания кубов. Могу я узнать, как это решить? Большое вам спасибо!
var btn = document.getElementById('add');
var container = document.getElementById('cubes-container');
var cubeId = 0;
btn.addEventListener('click', addCube);
var currentAnimateCount = 0;
function dropCube(cube) {
var pos = 0;
let intervalId = setInterval(function() {
if (pos == 200) {
clearInterval(intervalId);
} else {
pos ;
cube.style.top = pos "px";
}
}, 1);
}
function addCube() {
let cube = document.createElement('div');
let cubeContainer = document.createElement('div');
cube.className = 'cube';
cube.id = cubeId;
cube.innerHTML = cube.id;
cubeId ;
cubeContainer.className = 'cube-container';
cubeContainer.append(cube);
container.append(cubeContainer);
let pos = 0;
dropCube(cube)
} #cubes-container {
display: grid;
grid-template-columns: repeat(10, 1fr);
}
.cube-container {
position: relative;
height: 30px;
}
.cube {
width: 30px;
height: 30px;
background-color: orange;
text-align: center;
display: grid;
align-items: center;
justify-items: center;
position: absolute;
} <button id="add">add new</button>
<div id="cubes-container">
</div> Комментарии:
1. Привет, сколько кубиков вы рады, что их ждут, и как вы их удаляете (удаляете) в какой-то момент? Вы также можете счесть полезным просмотр CSS-анимации.
2. @AHaworth @A Haworth Привет! Большое вам спасибо за ваш ответ! Я хочу, чтобы в лучшем случае анимировались только два куба, все остальные ждут. Если я очень быстро нажму кнопку «Добавить», я могу добавить 10 кубов одновременно, но выпадают только первые два, после того как они заканчиваются, куб 3 и 4 начинают выпадать, затем после завершения куб 3 и 4 начинают выпадать куб 5 и 6. даже в то время, когда я продолжаю нажимать кнопку «Добавить», они всегда следуют этому порядку. Я не планирую удалять их в какой-то момент сейчас.
3. Не позволяйте этому продолжаться слишком долго, иначе у вас может закончиться хранилище, если вы продолжите создавать, но не удалять (хотя это займет много времени).
Ответ №1:
Рассмотрим следующий пример. Он использует jQuery по сравнению с JavaScript. Это может быть аналогично сценарию.
$(function() {
function addCube(target) {
var i = $(".cube").length;
var container = $("<div>", {
class: "cube-container"
}).appendTo(target);
$("<div>", {
class: "cube",
id: "cube-" i
}).html(i).appendTo(container);
return container;
}
function dropCube(cube) {
$(cube).addClass("falling").animate({
top: "200px"
}, 2000, function() {
$(cube).removeClass("falling");
if (cubes.length amp;amp; $(".falling").length < 2) {
dropCube(cubes.shift());
}
});
}
var cubes = [];
$("#add").click(function() {
cubes.push(addCube("#cubes-container"));
if ($(".falling").length < 2) {
dropCube(cubes.shift());
}
});
});
/*
var btn = document.getElementById('add');
var container = document.getElementById('cubes-container');
var cubeId = 0;
btn.addEventListener('click', addCube);
var currentAnimateCount = 0;
function dropCube(cube) {
var pos = 0;
let intervalId = setInterval(function() {
if (pos == 200) {
clearInterval(intervalId);
} else {
pos ;
cube.style.top = pos "px";
}
}, 1);
}
function addCube() {
let cube = document.createElement('div');
let cubeContainer = document.createElement('div');
cube.className = 'cube';
cube.id = cubeId;
cube.innerHTML = cube.id;
cubeId ;
cubeContainer.className = 'cube-container';
cubeContainer.append(cube);
container.append(cubeContainer);
let pos = 0;
dropCube(cube)
}
*/ #cubes-container {
display: grid;
grid-template-columns: repeat(10, 1fr);
}
.cube-container {
position: relative;
height: 30px;
}
.cube {
width: 30px;
height: 30px;
background-color: orange;
text-align: center;
display: grid;
align-items: center;
justify-items: center;
position: absolute;
top: 0;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">add new</button>
<div id="cubes-container"></div> Используя массив, вы .shift() указываете первый элемент массива. Также добавление класса к падающим предметам позволяет вам подсчитывать, какие из них падают. Мне нравится использовать анимацию, так как она позволяет осуществлять обратный вызов после завершения анимации, чтобы вы могли проверить наличие следующего элемента.
Обновление для JavaScript
var btn = document.getElementById('add');
var container = document.getElementById('cubes-container');
var cubes = [];
btn.addEventListener('click', function(event) {
cubes.push(addCube());
if (document.getElementsByClassName("falling").length < 2) {
dropCube(cubes.shift());
}
});
function dropCube(cube) {
var pos = 0;
cube.classList.add("falling");
var intervalId = setInterval(function() {
if (pos == 200) {
clearInterval(intervalId);
cube.classList.remove("falling");
if (document.getElementsByClassName("falling").length < 2 amp;amp; cubes.length) {
dropCube(cubes.shift());
}
} else {
pos ;
cube.style.top = pos "px";
}
}, 1);
}
function addCube() {
let cube = document.createElement('div');
let cubeContainer = document.createElement('div');
cube.className = 'cube';
cube.id = document.getElementsByClassName("cube").length;
cube.innerHTML = cube.id;
cubeContainer.className = 'cube-container';
cubeContainer.append(cube);
container.append(cubeContainer);
return cubeContainer;
} #cubes-container {
display: grid;
grid-template-columns: repeat(10, 1fr);
}
.cube-container {
position: relative;
height: 30px;
}
.cube {
width: 30px;
height: 30px;
background-color: orange;
text-align: center;
display: grid;
align-items: center;
justify-items: center;
position: absolute;
top: 0;
} <button id="add">add new</button>
<div id="cubes-container"></div> Комментарии:
1. Большое вам спасибо за вашу помощь! Этот метод массива потрясающий! Если я использую чистый JavaScript и такие вещи, как setInterval, есть ли способ узнать, какие из них заканчивают анимацию падения и вызывают падение других?
2. @xixi Я вернулся и тоже сделал пример JS. jQuery-это просто фреймворк для JavaScript, поэтому, если вы можете сделать это в jQuery, вы можете записать его обратно в JavaScript.
3. Большое вам спасибо за вашу помощь! Я не могу проголосовать, потому что там написано, что мне «нужно не менее 15 репутации, чтобы проголосовать», но я нажал «принять этот ответ». Действительно, большое вам спасибо! Этот метод просто потрясающий! почему я не могу придумать такие удивительные методы~ Мне действительно нужно узнать больше о том, как правильно использовать JavaScript! Спасибо!
4. @xixi есть много хороших руководств и способов изучить больше методов написания сценариев. Вы также увидите много хороших примеров переполнения стека. Вскоре вы начнете видеть, где вы можете улучшить код и понять, как его лучше использовать.
5. Большое вам спасибо, Извилистый 😀 Я постараюсь узнать больше о интерфейсе!