html5侧⾯板展开折叠,css实现侧边展开收起
前⾔：因为突然想研究研究侧边栏滑动展开收起怎么做的，就去baidu了⼀下transition。
先来看⼀下我的代码：
详情
内容1
内容1
内容1
内容1
内容1
.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渲染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;
好看的css代码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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。