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

---

解决安卓滑动卡顿

.rule {
  transform: translateX(80vw);
  transition: transform 1s;
}
 
.rule2 {
  transform: translateX(2vw);
  transition: transform 1s;
}
 
.rule-title {
    background-color: #F4A627;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    text-align: center;
    line-height: 30px;
    width: 20vw;
    height: 30px;
    float: left;
  }
 
  .rule-detail {
    padding: 0 6px;
    background-color: #F4A627;
    width: 75vw;
    height: 100%;
    float: left;
    line-height: 30px;
    border-bottom-left-radius: 5px;
  }