1

Я анимирую оверлей очень плохо, путём свистоплясок в JS. Мастера css, подскажите, как сделать нормально без js? ну или минимум js

const header__burger = document.querySelector('.header__burger');
const links = document.querySelector('.links');

header__burger.addEventListener('click', () => {
  header__burger.classList.toggle('active');
  if (header__burger.classList.contains('active')) {
    document.body.style.overflowX = 'hidden';
    links.style.visibility = 'visible';
  } else {
    links.addEventListener('transitionend', transEnd);
    document.body.style.overflowX = 'auto';
  }

  function transEnd() {
    links.style.visibility = 'hidden';
    links.removeEventListener('transitionend', transEnd);
  }
});

window.addEventListener('resize', () => {
  const width = document.body.clientWidth;
  if (width < 850) {
    links.style.visibility = 'visible';
  }
})
@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

body {
  font-family: 'Work Sans', sans-serif;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}

header {
  padding: 20px 0;
  background-color: black;
  color: white;
  text-transform: uppercase;
  font-size: 20px;
  position: fixed;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
}

.menu__nav {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}

.logo {
  font-size: 24px;
  white-space: nowrap;
}

.nav__link {
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  color: white;
}

.nav__link:not(:last-child) {
  margin-right: 10px;
}

.nav__link::before,
.nav__link::after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 2px;
  background-color: orange;
  top: 0;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
  transform-origin: left;
}

.nav__link::after {
  top: 100%;
  transform-origin: right;
}

.nav__link:hover::before,
.nav__link:hover::after {
  transform: scaleX(1);
}

.links {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.lines {
  position: relative;
  width: 25px;
  padding: 10px 10px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  margin-right: 15px;
  z-index: 2;
}

.line__burger {
  width: 100%;
  height: 3px;
  background-color: white;
  position: absolute;
  transition: transform 0.3s linear;
}

.line__burger:nth-child(1) {
  transform: translateY(8px);
}

.line__burger:nth-child(3) {
  transform: translateY(-8px);
}

.header__burger.active .line__burger:nth-child(1) {
  transform: rotate(45deg);
}

.header__burger.active .line__burger:nth-child(2),
.header__burger.active .line__burger:nth-child(3) {
  transform: rotate(-45deg);
}

@media (max-width: 850px) {
  .lines {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    position: absolute;
    right: 0;
  }
  .nav__link {
    margin: 15px 0;
  }
  .links {
    opacity: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 20px;
    overflow-y: auto;
    transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.0);
  }
  .header__burger.active .links {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.8);
  }
}
<header>
  <div class="container">
    <div class="menu__nav">
      <div class="logo">My company</div>
      <div class="header__burger">

        <div class="links">
          <a href="#" class="nav__link">Home</a>
          <a href="#" class="nav__link">About</a>
          <a href="#" class="nav__link">Services</a>
          <a href="#" class="nav__link">Portfolio</a>
          <a href="#" class="nav__link">Testimonials</a>
          <a href="#" class="nav__link">Contact</a>
        </div>
        <div class="lines">
          <div class="line__burger"></div>
          <div class="line__burger"></div>
          <div class="line__burger"></div>
        </div>

      </div>
    </div>
  </div>
</header>

2
  • что конкретно не устраивает? 6 мая 2020 в 18:33
  • @StrangerintheQ мне приходится visibility руками изменять. А также эта штука криво работает, если быстро тыкать. 6 мая 2020 в 18:40

1 ответ 1

0

Вот так можно!
Просто анимировать свойство visibility: с hidden на visible и обратно.
Если задать transition: visibility 0.2s linear, то если задать элементу visibility, это свойство задастся только когда закончатся 0.2s, потому что оно не анимируется

const header__burger = document.querySelector('.header__burger');
const links = document.querySelector('.links');

header__burger.addEventListener('click', () => {
  header__burger.classList.toggle('active');
  document.body.classList.toggle('overflowX_hidden');
});
@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

body {
  font-family: 'Work Sans', sans-serif;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}

header {
  padding: 20px 0;
  background-color: black;
  color: white;
  text-transform: uppercase;
  font-size: 20px;
  position: fixed;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
}

.overflowX_hidden {
  overflow-x: hidden;
}

.menu__nav {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}

.logo {
  font-size: 24px;
  white-space: nowrap;
}

.nav__link {
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  color: white;
}

.nav__link:not(:last-child) {
  margin-right: 10px;
}

.nav__link::before,
.nav__link::after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 2px;
  background-color: orange;
  top: 0;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
  transform-origin: left;
}

.nav__link::after {
  top: 100%;
  transform-origin: right;
}

.nav__link:hover::before,
.nav__link:hover::after {
  transform: scaleX(1);
}

.links {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.lines {
  position: relative;
  width: 25px;
  padding: 10px 10px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  margin-right: 15px;
  z-index: 2;
}

.line__burger {
  width: 100%;
  height: 3px;
  background-color: white;
  position: absolute;
  transition: transform 0.3s linear;
}

.line__burger:nth-child(1) {
  transform: translateY(8px);
}

.line__burger:nth-child(3) {
  transform: translateY(-8px);
}

.header__burger.active .line__burger:nth-child(1) {
  transform: rotate(45deg);
}

.header__burger.active .line__burger:nth-child(2),
.header__burger.active .line__burger:nth-child(3) {
  transform: rotate(-45deg);
}

@media (max-width: 850px) {
  .lines {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    position: absolute;
    right: 0;
  }
  .nav__link {
    margin: 15px 0;
  }
  .links {
    visibility: hidden;
    opacity: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 20px;
    overflow-y: auto;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.8);
  }
  .header__burger.active .links {
    opacity: 1;
    visibility: visible;
  }
}
<header>
  <div class="container">
    <div class="menu__nav">
      <div class="logo">My company</div>
      <div class="header__burger">

        <div class="links">
          <a href="#" class="nav__link">Home</a>
          <a href="#" class="nav__link">About</a>
          <a href="#" class="nav__link">Services</a>
          <a href="#" class="nav__link">Portfolio</a>
          <a href="#" class="nav__link">Testimonials</a>
          <a href="#" class="nav__link">Contact</a>
        </div>
        <div class="lines">
          <div class="line__burger"></div>
          <div class="line__burger"></div>
          <div class="line__burger"></div>
        </div>

      </div>
    </div>
  </div>
</header>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.