html5 侧面板展开折叠,css实现侧边展开收起

前言：因为突然想研究研究侧边栏滑动展开收起怎么做的，就去baidu了一下transition。

先来看一下我的代码：

详情

内容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;

}

html5 侧面板展开折叠,css实现侧边展开收起相关推荐

html css侧边展开收起,css实现侧边展开收起
**前言:**因为突然想研究研究侧边栏滑动展开收起怎么做的,就去baidu了一下transition. 先来看一下我的代码: 详情内容1 内容1 内容1 内容1 内容1 .detail { posi ...
CSS实现侧边展开导航栏
效果图代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
手机 html 折叠效果,HTML5仿苹果手机的面板合拢折叠效果
passbook仿苹果手机的面板合拢折叠效果-html5特效 .pocket{ width:300px; height:460px; padding: 10px; overflow: hidden; ...
CSS 实现超过固定高度后出现展开折叠按钮
在平时开发中,经常会碰到一些需要判断高度的场景,比如当超过一定高度后,需要自动出现展开折叠按钮,如下传统的思路肯定是通过JS去动态计算容器的高度,但这样就涉及到加载时机的问题,获取早了可能元素还没渲 ...
【CSS】1610- CSS 实现超过固定高度后出现展开折叠按钮
在平时开发中,经常会碰到一些需要判断高度的场景,比如当超过一定高度后,需要自动出现展开折叠按钮,如下传统的思路肯定是通过JS去动态计算容器的高度,但这样就涉及到加载时机的问题,获取早了可能元素还没渲 ...
js 展开折叠动画原理，jquery的toggle切换效果
效果图: 想法: jquery的展开折叠动画效果很好看,想自己实现一个,结果发现仅仅只靠css添加类和动画是不行,最开始的思路是折叠时候设置高度为0,展开时设置高度设置为auto,让他自己撑开,可是t ...
Android：展开/折叠动画
假设我有一个带有以下内容的垂直linearLayout: [v1] [v2] 默认情况下,v1的可见值= GONE. 我想用扩展动画显示v1并同时按下v2. 我尝试过这样的事情: Animation ...
js 控制展开折叠 div html dom
js 控制展开折叠 div html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
[Eclipse]GEF入门系列（七、XYLayout和展开/折叠功能）
前面的帖子里曾说过如何使用布局,当时主要集中在ToolbarLayout和FlowLayout(统称OrderedLayout),还有很多应用程序使用的是可以自由拖动子图形的布局,在GEF里称为XYL ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...

html5 侧面板展开折叠,css实现侧边展开收起

html5 侧面板展开折叠,css实现侧边展开收起相关推荐

最新文章

热门文章