плавное выезжание блока с помощью CSS или JS

78
22 февраля 2022, 10:00

Задача следующая: поставить затемнение на экран при нажатии на кнопку и обратно убирать затемнение при повторном нажатии.

Реализация: сделал див на весь экран с черным цветом и опасити, дал ему margin-left: -20000px. На Js записал изменение этого марджина с -20000 до 0 и обратно. А как можно сделать плавное заезжание? Смотрелось бы интереснее

JS

document.querySelector('.menu-icon-wrapper').onclick = function(){
        var dark = document.querySelector('.dark')
        document.querySelector('.menu-icon').classList.toggle('menu-icon-active');
        dark.style.marginLeft = (dark.style.marginLeft == '0px')? '-10000000px': '0px'
    }

Css

.dark{
width: 100%;
height: 100vh;
background-color: black;
opacity: 0.7;
position: absolute;
margin-left: -10000000px;

}

Answer 1

Лучше использовать всю логику стилей в стилях, а в js задавать классы-состояния.

document.querySelector('#nav').onclick = function() { 
  document.body.classList.toggle('dark'); 
}
body:after { 
  content: ''; 
  display: block; 
  width: 100%; 
  height: 100vh; 
  background-color: black; 
  opacity: 0.7; 
  position: absolute; 
  left: -10000px; 
  transition: transform 1s; 
} 
 
body.dark:after { 
  transform: translateX(10000px); 
}
<button id="nav">nav</button>

А анимацию делать через transform - она выносит в отдельный слой рендеринга (или как-то там) и работает быстрее и плавнее.

Answer 2

Появление

var flag = true; 
var btn = document.getElementById("btn"); 
 
btn.addEventListener('click',function(){ 
  if (flag){ 
    sh.style.backgroundColor = '#000000f0'; 
  } 
  else{ 
    sh.style.backgroundColor = '#00000000'; 
  } 
  flag = !flag; 
})
.container{ 
  width: 100%; 
  height:400px; 
  position:relative; 
} 
 
.shadow { 
  width:100%; 
  height:100%; 
   
  position:absolute; 
  top:0; 
  left:0; 
  transition-property: background-color; 
  transition-duration: 3s; 
}
<button id="btn">Click me!</button> 
<div class="container"> 
<div id="sh" class="shadow"></div> 
<div class="content" style="height:100%"> 
  <img src="https://i.pinimg.com/originals/76/6c/f7/766cf770ea8dd3529bd8e0c41d6784be.jpg" width="100%" height="100%" /> 
</div> 
</div>

Выезжание:

var flag = true; 
var btn = document.getElementById("btn"); 
 
btn.addEventListener('click',function(){ 
  if (flag){ 
    sh.style.left = '0'; 
  } 
  else{ 
    sh.style.left = '-120%'; 
  } 
  flag = !flag; 
})
.container{ 
  width: 100%; 
  height:400px; 
  position:relative; 
} 
 
.shadow { 
  width:100%; 
  height:100%; 
  background: #000000f0; 
  position:absolute; 
  top:0; 
  left:-120%; 
  transition-property: left; 
  transition-duration: 3s; 
}
<button id="btn">Click me!</button> 
<div class="container"> 
<div id="sh" class="shadow"></div> 
<div class="content" style="height:100%"> 
  <img src="https://i.pinimg.com/originals/76/6c/f7/766cf770ea8dd3529bd8e0c41d6784be.jpg" width="100%" height="100%" /> 
</div> 
</div>

READ ALSO
Не сохраняется токен в LocalStorage
javascript

Не сохраняется токен в LocalStorage

Есть файл Token с запросом

 100
splice удаляет первый элемент все время
javascript

splice удаляет первый элемент все время

Почему splice удаляет все время первый элемент массива?

 71
Chrome console не выводит данные
javascript

Chrome console не выводит данные

Есть расширение, в нем есть такой кодЗахожу в консоль - пустота

 183
Разное отображение slike на chrome и safari
javascript

Разное отображение slike на chrome и safari

Целый день не могу понять в чем проблема!!! Недавно запустил сайт на wordpress https://xn--80ateidbeixn--90ais/ все работало отлично, на всякий случай сделал бэкап(сейчас...

 96