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