css滑动门技术案例

<div class="slidingdoor">
  <div class="handle">点击展开</div>
  <div class="content">
    <p>这里是滑动门的内容</p>
  </div>
</div>

.slidingdoor {
  position: relative;
  width: 200px;
  height: 100px;
  overflow: hidden;
}
.handle {
  width: 100%;
  height: 100%;
  backgroundcolor: #333;
  color: #fff;
  textalign: center;
  lineheight: 100px;
  cursor: pointer;
}
.content {
  width: 0;
  height: 100%;
  backgroundcolor: #f4f4f4;
  transition: width 0.5s ease;
}

document.querySelector('.handle').addEventListener('click', function() {
  var content = this.nextElementSibling;
  if (content.style.width === '200px') {
    content.style.width = '0';
  } else {
    content.style.width = '200px';
  }
});