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;
  }