css实现侧边展开收起

前言：因为突然想研究研究侧边栏滑动展开收起怎么做的，就去baidu了一下transition。

先来看一下我的代码：

复制代码

<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

解决安卓滑动卡顿

安卓滑动会卡顿主要是因为transition渲染margin，left，right，top，bottom的时候会计算很多值，具体计算了什么可以去baidu一下，这里就讲解决办法。

当transition计算margin，left，right，top，bottom类的值时会卡顿，把方向移动换成transform，再放在transition中就可以解决卡顿。

复制代码

/**这是控制左右移动*/
.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;
  }