代码之家 › 专栏 › 技术社区 › Jay

CSS转换问题

transition css-transitions css html jquery

Jay · 技术社区 · 6 年前

我正在尝试创建一个简单的滑入和滑出菜单使用CSS转换的平滑效果。根据窗口的大小,菜单从左侧移到屏幕顶部。

我一辈子都想不出该怎么解决或者我做错了什么。

$('#menu-button').click(function() {
  $('#menu').toggleClass('closed');
});

#wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
  background: #eeeeee;
}

#menu-wrapper {
  grid-column: 1;
  border-right: 1px solid #444444;
}

#menu {
  width: 300px;
  transition: width 1s;
}

#menu.closed {
  width: 50px;
}

#menu-button {
  width: 50px;
  height: 50px;
  float: right;
}

.bar {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
}

#content-wrapper {
  grid-column 2;
}

@media all and (max-width: 900px) {
  #wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto 100%;
  }
  #menu-wrapper {
    grid-row: 1;
    grid-column: 1;
    border-bottom: 1px solid;
    border-right: none;
  }
  #menu {
    width: 100%;
    height: 100px;
    transition: height 1s;
  }
  #menu.closed {
    height: 50px;
  }
  #content-wrapper {
    grid-column: 1;
    grid-row: 2;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="menu-wrapper">
    <div id="menu">
      <div id="menu-button">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
  </div>
  <div id="content-wrapper">
    <div id="content">
    </div>
  </div>
</div>

1 回复 | 直到 6 年前

Temani Afif 6 年前

将边框移动到内部元素(应用转换的位置)以避免出现问题,然后调整一些CSS:

$('#menu-button').click(function() {
  $('#menu').toggleClass('closed');
});

#wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
  background: #eeeeee;
}

#menu-wrapper {
  grid-column: 1;
}

#menu {
  width: 300px;
  height: 100%; /*added*/
  transition: width 1s;
  border-right: 1px solid #444444; /*added*/
}

#menu.closed {
  width: 50px;
}

#menu-button {
  width: 50px;
  height: 50px;
  float: right;
}

.bar {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
}

#content-wrapper {
  grid-column 2;
}

@media all and (max-width: 900px) {
  #wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto 100%;
  }
  #menu-wrapper {
    grid-row: 1;
    grid-column: 1;
    border-right: none;
  }
  #menu {
    width: 100%;
    height: 100px;
    border-right:none; /*added*/
    border-bottom: 1px solid; /*added*/
    transition: height 1s;
  }
  #menu.closed {
    height: 50px;
    width:100%; /*added*/
  }
  #content-wrapper {
    grid-column: 1;
    grid-row: 2;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="menu-wrapper">
    <div id="menu">
      <div id="menu-button">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
  </div>
  <div id="content-wrapper">
    <div id="content">
    </div>
  </div>
</div>