js基础编程-题目27 抽屉动画drawer

整理下初学时做过的js基础编程题目和大家分享以下，如果大家觉得有用，别忘了点一下赞哦

css3

用css3写一个drawer 抽屉从下到上的动画

视频链接：链接

html部分

<ul class="wrap">
  <li></li>
  <li>
    <span>菜单</span>
    <ul class="menu">
      <li>内容1</li>
      <li>内容2</li>
      <li>内容3</li>
      <li>内容4</li>
    </ul>
  </li>
  <li></li>
  <li></li>
</ul>

css部分

body,
ul {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
.wrap {
  margin: 50px auto;
  width: 400px;
  height: 50px;
  border: 1px solid;
  background-color: aqua;
  /* overflow: hidden; */
}
.wrap > li {
  position: relative;
  float: left;
  width: 100px;
  height: 100%;
  line-height: 50px;
  text-align: center;
  box-sizing: border-box;
}
.wrap > li::before {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  content: '';
  height: 100%;
  width: 0;
  border-right: 1px solid;
  background-color: black;
}
.wrap > li:last-child::before {
  border: none;
}
.wrap > li:nth-child(2)::after {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  right: 5px;
  display: block;
  content: '<';
  transform: rotateZ(90deg);
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.wrap > li:hover::after {
  transform: rotateZ(-90deg);
}
.wrap > li:hover .menu {
  transition: background 2s, height 2s;
  background-color: palevioletred;
  height: 200px;
}
.menu {
  display: block;
  position: absolute;
  top: calc(100% + 1px);
  width: 150px;
  overflow: hidden;
  transition: height 2s;
  height: 0;
  
  background-color: pink;
}
.menu > li {
  width:150px;
  height:50px;
  border: 1px solid;
  border-top:0;
  box-sizing: border-box;
}