css实现侧边展开收起

前言：由于忽然想研究研究侧边栏滑动展开收起怎么作的，就去baidu了一下transition。

详情

内容1

内容1

内容1

内容1

内容1

右侧有实现demo。就是那个绿色的详情

先来看一下个人代码：

 <div class="detail">
        <div class="div1">详情</div>
        <div class="div2">
          <div>内容1</div>
          <div>内容1</div>
          <div>内容1</div>
          <div>内容1</div>
          <div>内容1</div>
        </div>
 </div>

<style>
  .detail {
    position: fixed;
    right: -100px;
    transition: right 1s;
  }

  .detail:hover {
    right: 0;
  }

  .div1 {
    background-color: green;
    border-top-left-radius: 10%;
    border-bottom-left-radius: 10%;
    width: 50px;
    height: 30px;
    float: left;
  }

  .div2 {
    background-color: green;
    width: 100px;
    height: 100px;
    float: left;
  }

我先把整个div都移到屏幕外面，只留下详情显示出来，当鼠标悬浮到详情上的时候，把righ变成0，就能够从右边出来了，固然直接出来确定很差看，就加了一个过渡动画transition，使其缓慢的滑动出来

具体怎么用transition看这个：https://www.cnblogs.com/zouwangblog/articles/11022116.html