css实现侧边展开收起

时间:2022-02-04 19:35:25

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