CSS3过渡影响其他元素

时间：2018-07-26 20:28:25

标签： javascript html5 css3

我为网站创建了一个简单的sidenav，单击菜单图标时该网站可以显示和隐藏。我添加了一个过渡效果，使其可以平滑显示和隐藏。出于某种奇怪的原因，一旦添加了trasition，侧边栏的菜单文本就会变得非常有趣，在过渡期间它会越来越大。

https://codepen.io/paulamourad/pen/rrGVBd 

/*-- Sidebar --*/

.close {
  width: 0%;
  background-color: green;
}

.navbar-toggler-icon {
  cursor: pointer;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1B0088;
  overflow-x: hidden;
  transition: 0.5s;
  /* TRANSITION HERE */
  padding-top: 60px;
  -webkit-box-shadow: 5px 0px 44px 2px rgba(0, 0, 0, 0.21);
  -moz-box-shadow: 5px 0px 44px 2px rgba(0, 0, 0, 0.21);
  box-shadow: 5px 0px 44px 2px rgba(0, 0, 0, 0.21);
}

.sidenav a {
  white-space: nowrap;
  padding: 4px 8px 4px 20px;
  text-decoration: none;
  font-size: 1em;
  color: #b8b8b8;
  display: block;
  transition: 0.3s;
  /*TRANSITION HERE */
}

.sidenav a:hover {
  color: #fff;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  color: #b8b8b8;
}


/* Top Navbar */

.navbar-blue,
.dropdown-menu {
  background-color: #1b0088;
}


/* ::::::::::::::: RESPONSIVE CSS :::::::::::::::::: */


/* Mobile Phones (Starting at 576px and less) */

@media (max-width: 576px) {
  .open {
    width: 70%;
  }
}


/* Tablets and Desktop */

@media (min-width: 577px) {
  .open {
    width: 20%;
  }
}
<!-- BOOTSTRAP 4 CDN -->
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- /BOOTSTRAP 4 CDN -->

  <!-- MY CODE -->
  <!-- Top Navbar & Sidebar -->
  <nav class="navbar navbar-expand-lg navbar-blue">
    <a class="navbar-brand" href="#">
      <img src="#" alt="Logo">
    </a>
    <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div id="sidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">Menu 1</a>
      <hr>
      <a href="#">Menu 2</a>
      <hr>
      <a href="#">Menu 3</a>
      <hr>
      <a href="#">Menu 4</a>
      <hr>
      <a href="#">Menu 5</a>
      <hr>
    </div>
    <div class="top-navbar navbar-dark">
      <!--span onclick="openNav()">&#9776;</span> -->
      <span onclick="openNav()" class="navbar-toggler-icon"></span>
    </div>
  </nav>
  <!-- /Top Navbar & Sidebar -->





  <!-- Scripts -->
  <script src="js/jquery.js"></script>
  <script src="js/popper.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <!-- Sidenav Script -->
  <script>
    function openNav() {
      $('#sidenav').removeClass('close');
      $('#sidenav').addClass('open');
      //  document.getElementById("sidenav open").style.width = "20%";
      $('.sidenav').css('-webkit-box-shadow', '5px 0px 44px 2px rgba(0,0,0,0.21)');
      $('.sidenav').css('-moz-box-shadow', '5px 0px 44px 2px rgba(0,0,0,0.21)');
      $('.sidenav').css('box-shadow', '5px 0px 44px 2px rgba(0,0,0,0.21)');
    }

    function closeNav() {
      $('#sidenav').removeClass('open');
      $('#sidenav').addClass('close');
      $('.sidenav').css('-webkit-box-shadow', '0px 0px 0px 0px rgba(0,0,0,0.0)');
      $('.sidenav').css('-moz-box-shadow', '0px 0px 0px 0px rgba(0,0,0,0.0)');
      $('.sidenav').css('box-shadow', '0px 0px 0px 0px rgba(0,0,0,0.0)');
    }
  </script>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>

</html>

1 个答案:

答案 0 :(得分：0)

我不明白您为什么创建.close类。您只能使用.open类，并且一切正常。

/*-- Sidebar --*/

.close {
  width: 0%;
  background-color: green;
}

.navbar-toggler-icon {
  cursor: pointer;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1B0088;
  overflow-x: hidden;
  transition: 0.5s;
  /* TRANSITION HERE */
  padding-top: 60px;
  -webkit-box-shadow: 5px 0px 44px 2px rgba(0, 0, 0, 0.21);
  -moz-box-shadow: 5px 0px 44px 2px rgba(0, 0, 0, 0.21);
  box-shadow: 5px 0px 44px 2px rgba(0, 0, 0, 0.21);
}

.sidenav a {
  white-space: nowrap;
  padding: 4px 8px 4px 20px;
  text-decoration: none;
  font-size: 1em;
  color: #b8b8b8;
  display: block;
  transition: 0.3s;
  /*TRANSITION HERE */
}

.sidenav a:hover {
  color: #fff;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  color: #b8b8b8;
}


/* Top Navbar */

.navbar-blue,
.dropdown-menu {
  background-color: #1b0088;
}


/* ::::::::::::::: RESPONSIVE CSS :::::::::::::::::: */


/* Mobile Phones (Starting at 576px and less) */

@media (max-width: 576px) {
  .open {
    width: 70%;
  }
}


/* Tablets and Desktop */

@media (min-width: 577px) {
  .open {
    width: 20%;
  }
}
<!-- BOOTSTRAP 4 CDN -->
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!-- /BOOTSTRAP 4 CDN -->

</head>
<body>
  <!-- MY CODE -->
  <!-- Top Navbar & Sidebar -->
  <nav class="navbar navbar-expand-lg navbar-blue">
    <a class="navbar-brand" href="#">
      <img src="#" alt="Logo">
    </a>
    <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div id="sidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">Menu 1</a>
      <hr>
      <a href="#">Menu 2</a>
      <hr>
      <a href="#">Menu 3</a>
      <hr>
      <a href="#">Menu 4</a>
      <hr>
      <a href="#">Menu 5</a>
      <hr>
    </div>
    <div class="top-navbar navbar-dark">
      <!--span onclick="openNav()">&#9776;</span> -->
      <span onclick="openNav()" class="navbar-toggler-icon"></span>
    </div>
  </nav>
  <!-- /Top Navbar & Sidebar -->





  <!-- Scripts -->
 <!-- <script src="js/jquery.js"></script>
  <script src="js/popper.js"></script>
  <script src="js/bootstrap.min.js"></script> -->
  <!-- Sidenav Script -->
  <script>
    function openNav() {
      //$('#sidenav').removeClass('close');
      $('#sidenav').addClass('open');
      //  document.getElementById("sidenav open").style.width = "20%";
      $('.sidenav').css('-webkit-box-shadow', '5px 0px 44px 2px rgba(0,0,0,0.21)');
      $('.sidenav').css('-moz-box-shadow', '5px 0px 44px 2px rgba(0,0,0,0.21)');
      $('.sidenav').css('box-shadow', '5px 0px 44px 2px rgba(0,0,0,0.21)');
    }

    function closeNav() {
      $('#sidenav').removeClass('open');
      //$('#sidenav').addClass('close');
      $('.sidenav').css('-webkit-box-shadow', '0px 0px 0px 0px rgba(0,0,0,0.0)');
      $('.sidenav').css('-moz-box-shadow', '0px 0px 0px 0px rgba(0,0,0,0.0)');
      $('.sidenav').css('box-shadow', '0px 0px 0px 0px rgba(0,0,0,0.0)');
    }
  </script>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>

</html>

编辑：啊，我还添加了</head><body>您忘记了（^ _ ^;）

编辑2 ：我也评论了一些javascript库（jquery＆Co.），因为它们被重复了。

相关问题
最新问题