css实现侧边展开收起

时间:2024-05-21 21:34:38

前言:因为突然想研究研究侧边栏滑动展开收起怎么做的,就去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;
  }