Я не силен в JS анимациях, прошу, подскажите, как оптимизировать этот код, чтобы анимации в браузере меньше тормозили?
document.addEventListener('DOMContentLoaded', function(){
open()
close()
});
var buttonsOpen = document.querySelectorAll('.prizeListItemButton'),
buttonsClose = document.querySelectorAll('.buttonClose'),
sections = document.querySelectorAll('.prizeListItem'),
shortContent = document.querySelectorAll('.prizeListItemShort'),
detailContent = document.querySelectorAll('.prizeListItemDetail'),
index;
function open(){
Array.prototype.forEach.call(buttonsOpen, function (buttonOpen, i) {
buttonOpen.addEventListener('click', function () {
console.log(sections[i]);
Array.prototype.forEach.call(shortContent, function (element, i) {
element.style.opacity = '0';
setTimeout(function() {
element.style.display = 'none';
}, 500);
});
Array.prototype.forEach.call(sections, function (section, is) {
section.style.width = '0';
});
sections[i].style.width = '100%';
detailContent[i].style.display = 'flex';
setTimeout(function() {
detailContent[i].style.opacity = '1';
}, 350);
});
});
}
function close(){
Array.prototype.forEach.call(buttonsClose, function (buttonClose, i) {
buttonClose.addEventListener('click', function () {
Array.prototype.forEach.call(detailContent, function (element, i) {
element.style.opacity = '0';
setTimeout(function() {
element.style.display = 'none';
}, 350);
console.log(sections[i]);
Array.prototype.forEach.call(sections, function (section, is) {
setTimeout(function() {
section.style.width = '33.333%';
}, 500);
});
Array.prototype.forEach.call(shortContent, function (element, i) {
element.style.display = 'block';
element.style.opacity = '1';
});
});
});
});
}
Простой
