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