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