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