Привет, я делаю ваниль JS, чтобы научиться анимировать поля, используя ванильные JS условные выражения.
Я пытаюсь сделать 2 деления (рядом друг с другом) скользящими по направлению к стороны, когда вы нажимаете на нее, как раздвижная дверь.
Я хочу сделать это только с ванилью JS, хотя я знаю, что это возможно с CSS.
Моя функция не работает, и я не знаю, почему это не так, поскольку браузер не показывает никаких ошибок.
Я намерен увеличить правое поле левой двери создать эффект открытия, но я не уверен, что это правильное направление к go об этом.
Вот мой код: JS:
function opena(className){
var dura = 2;
var eleme= document.getElementsByClassName(className)[0];
var jupiter = eleme.style.marginRight;
var mars =eleme.style.marginLeft;
window.setInterval(()=>{
if(eleme.classList.contains('left')){
if(jupiter!=50){
jupiter++;
jupiter+"vw";
}
}else if(eleme.classList.contains('right')){
if(mars!=50){
mars++;
mars+"vw";
}
}
},dura)
}
css:
.pack{
width:100%;
}
body{
margin-left:0;
margin-right:0;
}
.left{
background:red;
display:inline-block;
width:50vw;
margin-left:0;
margin-right:0;
}
.right{
background:blue;
display:inline-block;
position:absolute;
width:50vw;
padding-left:0;
margin-left:0;
margiin-right:0;
}
*
*HTML: **
<body>
<div class="pack">
<div class="left" onClick="opena('left')">A</div>
<div class ="right" onClick="opena('right')">B</div>
</div>
</body>
Спасибо за любую оказанную помощь!