var bannersClick = document.querySelector('.banners__click'),
bannersInfo = document.querySelector('.banners'),
bannersClose = document.querySelector('.banners__close');
function addBlock(clasS,animRl) {
clasS.classList.add(animRl);
}
function style(clasS,sum) {
clasS.style.right=sum;
}
bannersClose.addEventListener('click', closes);
bannersClick.addEventListener('click', click);
function click() {
addBlock(this,'slideInRight');
style(this,"400px");
bannersInfo.classList.remove('slideOutLeft');
addBlock(bannersInfo,'slideInRight');
style( bannersInfo,0);
}
function closes() {
bannersInfo.classList.remove('slideInRight');
addBlock(bannersInfo,'slideOutLeft');
bannersInfo.style.right = "-410px";
bannersClick.style.right = "-10px"
}var bannersClick = document.querySelector('.banners__click'),
bannersInfo = document.querySelector('.banners'),
bannersClose = document.querySelector('.banners__close');
bannersClick.addEventListener('click',function () {
this.classList.toggle('active');
bannersInfo.classList.toggle('active');
});
bannersClose.addEventListener('click',function () {
bannersClick.classList.toggle('active');
bannersInfo.classList.toggle('active');
});.banners__click {
transition-duration: 1s;
right:0
}
.banners__click.active {
transition-duration: 1s;
right: 400px;
}
var и перейти на letи constconst bannersClick = document.querySelector('.banners__click');
const bannersInfo = document.querySelector('.banners');
const bannersClose = document.querySelector('.banners__close');
function addClass(element, className) {
element.classList.add(className);
}
function setRightStyle(element, value) {
element.style.right = value;
}
function handleClick() {
addClass(this, 'slideInRight');
setRightStyle(this, '400px');
bannersInfo.classList.remove('slideOutLeft');
addClass(bannersInfo, 'slideInRight');
setRightStyle(bannersInfo, '0');
}
function handleClose() {
bannersInfo.classList.remove('slideInRight');
addClass(bannersInfo, 'slideOutLeft');
setRightStyle(bannersInfo, '-410px');
setRightStyle(bannersClick, '-10px');
}
bannersClose.addEventListener('click', handleClose);
bannersClick.addEventListener('click', handleClick);