text 显示 - 隐藏 - 平滑+显示无div - css，html，js + burger

Posted 2021-05-02

JS-----------------------
$(document).ready(function () {
  $('.nav-icon4').click(function () {
    $(this).toggleClass('open');
  });
});
$(document).ready(function () {
  $('.nav-icon4').click(function () {
    if ($(this).hasClass('open')) {
      $('#burgerDocuraPopup').removeClass('hiddenone');
      setTimeout(function () {
        $('#burgerDocuraPopup').removeClass('visuallyhiddenone');
      }, 20);
      $('body').css('overflow', 'hidden');
    } else {
      $('#burgerDocuraPopup').addClass('visuallyhiddenone');
      $('#burgerDocuraPopup').one('transitionend', function (e) {
        $('#burgerDocuraPopup').addClass('hiddenone');
      });
      $('body').css('overflow', 'auto');
    }
  });
});
PUG-----------------------
.container-new
  .nav-icon4
    span
    span
    span
#burgerDocuraPopup.hiddenone.visuallyhiddenone
  .container-new
    header
      .burger-logo
      .burger-phone
    .burger-content Lorem ipsum dolor sit amet consectetur, adipisicing elit.
SASS-----------------------
#burgerDocuraPopup
  position: fixed
  left: 0
  top: 0
  bottom: 0
  right: 0
  z-index: 10
  background-color: #fff
  transition: $t
  header
    height: 80px
  .burger-content
    height: calc(100vh - 160px)
    overflow: auto
.hiddenone
  display: none!important
.visuallyhiddenone
  opacity: 0
.nav-icon4
    display: none
    width: 25px
    height: 18px
    position: fixed
    transform: rotate(0deg)
    transition: .5s ease-in-out
    cursor: pointer
    top: 30px
    z-index: 1000
    span
      display: block
      position: absolute
      height: 2px
      width: 100%
      background: #464646
      opacity: 1
      left: 0
      transform: rotate(0deg)
      transition: .25s ease-in-out
      &:nth-child(1)
        top: 0px
        transform-origin: left center
      &:nth-child(2)
        top: 8px
        transform-origin: left center
        width: 20px
      &:nth-child(3)
        top: 16px
        transform-origin: left center
    &.open span
      &:nth-child(1)
        transform: rotate(45deg)
        top: -3px
        left: 0px
      &:nth-child(2)
        width: 0%
        opacity: 0
      &:nth-child(3)
        transform: rotate(-45deg)
        top: 15px
        left: 0px
    @media (max-width: 900px)
      display: block