CSS实现页面切换时的滑动效果
最近在开发手机端APP页面功能时遇到一个需求:某个页面查询的数据有三种分类，需要展示在同一页面上,用户通过点击分类标签来查看不同类型的数据， 期望效果是
用户点击标签切换时另一个页面能够以一个平滑切入的方式展示数据.
示意图如下：
话不多说了．
首先上CSS
<style type="text/css">
html, body{
height: 100%;
}
body{
overflow:hidden; /*设置超出页面部分隐藏*/
margin: 0;/*初始化页面默认边距*/
padding: 0;
font-family: sans-serif;
}
.page-title-text {
padding-left: 17%;
}
.layui-select-condition {
position:fixed;
padding-top: 16px;
width:100%;
display: none;
z-index:999;
background-color: white;
}
.layui-form-select .layui-input {
padding-right: 30px;
cursor: pointer;
border: 0px;
}
.layui-bottom button{
border: none;
line-height: 50px;
height: 50px;
width: 100%;
}
.line-block-container{
display: inline;
width: 100%;
line-height: 20px;
margin-left: 3%;
padding: 0;
}
.layui-tab-title li a{
display: inline-block;
background: rgb(255 255 255);
color: #5d5d5d;
border: 1px solid #5d5d5d;
width: 26%;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 12px;
position: absolute;
top: 22%;
}
.layui-tab-title li a {
display: inline-block;
}
.zui-col-fitable{
margin-left: 5%;
margin-right: 6%;
padding: 0;
position:relative;
}
.zui-line-separater{
height: 2px;
margin-left: 3%;
}
hr{
margin:3px 0;
}
.zui-col-fitable input{
border:0;
outline:none;
}
#alarmTime:focus{
border:1px solid #66ccff!important;
}
/*给三个子页面的容器添加CSS，设置布局为相对布局的原因是为了实现页面切换效果*/
.zui-slide-container{
position:relative;
margin-top: 50px;
height:100%;
width:100%;
overflow:hidden;
text-align: center;
}
/*给子页面的div设置为绝对定位与父容器的相对定位结合使用实现div布局*/
.zui-slide-container>div{
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
-webkit-transition: all 0.25s ease-in-out; /*为页面设置显示时的切换效果与切换速度,可以在浏览器中调整切换速度来找到自己合适的速度*/
transition: all 0.25s ease-in-out;
top: 0;
}
/*
设置各个页面的初始位置，后面会有用到
*/
#alarmLevel1{
left:-100%
}
#alarmLevel2{
left:-100%
}
#alarmLevel3{
left:-100%
}
/*
设置当各个子DIV添加move的CSS时,div的位置
*/
#alarmLevel1.move{
left: 0;
}
#alarmLevel2.move{
left: 0;
}
#alarmLevel3.move{
left: 0;
}
.div-align-right{
left:100%
}
.div-align-left{
left:-100%
}
#tpl span{
margin: 0;
padding: 0;
float: left;
}
.zui-this{
}
</style>
上页面布局：
<div class="div-main">
<div class="page-title">
<div class="layui-row" style="color:#ffffff">
<div class="layui-col-xs4">
<div class="back-area">
<i class = "layui-icon layui-icon-left" onclick="getBack()"></i>
</div>
</div>
<div class="layui-col-xs4">
<div class="page-title-text">
预警层级
</div>
</div>
<div class="layui-col-xs4">
</div>
</div>
</div>
<div class="div-main-body">
<div class="layui-tab layui-row layui-tab-brief" lay-filter="dataContainer" style="margin: 0px;">
<ul class="layui-tab-title">
<li style="display:inline;padding:0px;">
<div style="position:relative;height:40px;">
<a href="#alarmLevel1" data-level = "1" data-brother="alarmLevel2,alarmLevel3" style="border-radius:5px 0px 0px 5px;left: 11%;">层级一</a>
<a href="#alarmLevel2" data-level = "2" data-brother="alarmLevel1,alarmLevel3" style="border-radius: unset;left:37%">层级二</a>
<a href="#alarmLevel3" data-level = "3" data-brother="alarmLevel2,alarmLevel1" style="border-radius:0px 5px 5px 0px;left:63%">层级三</a>
</div>
</li>
</ul>
</div>
<div class="zui-slide-container">
<div id="alarmLevel1" style="width:100%;height:100%;position:absolute;">
<table id="alarmLevelGrid1" lay-filter="alarmLevel1" class="layui-hide"></table>
</div>
<div id="alarmLevel2" style="width:100%;height:100%;position:absolute;" >
<table id="alarmLevelGrid2" lay-filter="alarmLevel2" class="layui-hide"></table>
</div>
<div id="alarmLevel3" style="width:100%;height:100%;position:absolute;">
<table id="alarmLevelGrid3" lay-filter="alarmLevel3" class="layui-hide"></table>
</div>
</div>
</div>
</div>
布局没什么好说的，主要就是根据原型图来设置各个ｄｉｖ的位置．
上javascript代码
<script type="text/javascript">
"use strict"
var table = layui.table;
var $ = layui.jquery;
loadTableData();
function loadTableData(){
var alarmLevel = $("zui-this").attr("data-level");
loadData({"alarmLevel":alarmLevel});
}
function loadData(searchParams){
table.render({
elem: '#alarmLevelGrid1'
,id:'alarmLevelGrid1'
,url:'xxxx/xxx/getData'
,toolbar: false
,title: '预警层级记录表'
,totalRow: false
,limits:[3,5,10,20]
,limit:5
,cols: [[
{
field:'alarmLevel', // 只需要在此处选择一个必定存在的元素作为渲染条件即可
title:'预警层级',
width:400,
templet:'#alarmLevelTpl'
}
]]
,page: true
,where :{"alarmLevel":"1"}
,response: {
statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
}
,parseData: function(res){
return {
"code": res.code==0?200:404, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.total, //解析数据长度
"data": res.level //解析数据列表
};
}
,done: function (res, curr, count){
// done函数的妙用，利用表格数据完成后，调整对应的css可以将layui的pc端表格设置成兼容手机端模式
$("div[lay-id=alarmLevelGrid1]").css("margin-top", "11%");
layui.$('.layui-table-view .layui-table').css("width","100%");
layui.$('table tbody tr td div').attr("class","");
layui.$('table tbody tr td').css("display","inline-flex");
layui.$('table tbody tr td').css("border-width","1px");
layui.$('table tbody tr td').css("border-color","#66CCFF");
layui.$('table tbody tr td').css("border-radius","1rem");
layui.$('table tbody tr td').css("border-style","solid");
layui.$('table tbody tr td').css("margin-left","3%");
layui.$('table tbody tr td').css("width","94%");
layui.$('table tbody tr td').css("padding-left","12px");
layui.$('table tbody tr td').removeAttr("data-content");
layui.$('table tbody tr td').removeAttr("data-edit");
// 隐藏手机端不需要的部分
layui.$('.layui-table-header').css("display","none");
layui.$('.layui-table-tool').css("display","none");
layui.$('.layui-table-total').css("display","none");
// 处理分页条内容
layui.$('.layui-table-page').css("width","100%");
$('.layui-laypage-skip').remove();
layui.$('table').css("border-collapse","separate");
layui.$('table').css("border-spacing","0px 10px");
}
});
table.render({
elem: '#alarmLevelGrid2'
,id:'alarmLevelGrid2'
,url:'xxxx/assf/xx/getData'
,toolbar: false
,title: '预警层级记录表'
,totalRow: false
,limits:[3,5,10,20]
,limit:5
,cols: [[
{
field:'alarmLevel', // 只需要在此处选择一个必定存在的元素作为渲染条件即可
title:'预警层级',
width:400,
event: 'viewDetail',
templet:'#alarmLevelTpl'
}
]]
,page: true
,where :{"alarmLevel":"2"}
,response: {
statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
}
,parseData: function(res){
return {
"code": res.code==0?200:404, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.total, //解析数据长度
"data": res.level //解析数据列表
};
}
,done: function (res, curr, count){
$("div[lay-id=alarmLevelGrid2]").css("margin-top", "11%");
layui.$('.layui-table-view .layui-table').css("width","100%");
layui.$('table tbody tr td div').attr("class","");
layui.$('table tbody tr td').css("display","inline-flex");
layui.$('table tbody tr td').css("border-width","1px");
layui.$('table tbody tr td').css("border-color","#66CCFF");
layui.$('table tbody tr td').css("border-radius","1rem");
layui.$('table tbody tr td').css("border-style","solid");
layui.$('table tbody tr td').css("margin-left","3%");
layui.$('table tbody tr td').css("width","94%");
layui.$('table tbody tr td').css("padding-left","12px");
layui.$('table tbody tr td').removeAttr("data-content");
layui.$('table tbody tr td').removeAttr("data-edit");
// 隐藏手机端不需要的部分
layui.$('.layui-table-header').css("display","none");
layui.$('.layui-table-tool').css("display","none");
layui.$('.layui-table-total').css("display","none");
// 处理分页条内容
layui.$('.layui-table-page').css("width","100%");
$('.layui-laypage-skip').remove();
layui.$('table').css("border-collapse","separate");
layui.$('table').css("border-spacing","0px 10px");
}
});
table.render({
elem: '#alarmLevelGrid3'
,id:'alarmLevelGrid3'
,url:'xxxx/sxxx/getData'
,toolbar: false
,title: '预警层级记录表'
,totalRow: false
,limits:[3,5,10,20]
,limit:5
,cols: [[
{
field:'alarmLevel', // 只需要在此处选择一个必定存在的元素作为渲染条件即可
title:'预警层级',
width:400,
event: 'viewDetail',
templet:'#alarmLevelTpl'
}
]]
,page: true
,where :{"alarmLevel":"3"}
,response: {
statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
}
,parseData: function(res){
return {
"code": res.code==0?200:404, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.total, //解析数据长度
"data": res.level //解析数据列表
};
}
,done: function (res, curr, count){
$("div[lay-id=alarmLevelGrid3]").css("margin-top", "11%");
layui.$('.layui-table-view .layui-table').css("width","100%");
layui.$('table tbody tr td div').attr("class","");
layui.$('table tbody tr td').css("display","inline-flex");
layui.$('table tbody tr td').css("border-width","1px");
layui.$('table tbody tr td').css("border-color","#66CCFF");
layui.$('table tbody tr td').css("border-radius","1rem");
layui.$('table tbody tr td').css("border-style","solid");
layui.$('table tbody tr td').css("margin-left","3%");
layui.$('table tbody tr td').css("width","94%");
layui.$('table tbody tr td').css("padding-left","12px");
layui.$('table tbody tr td').removeAttr("data-content");
layui.$('table tbody tr td').removeAttr("data-edit");
// 隐藏手机端不需要的部分
layui.$('.layui-table-header').css("display","none");
layui.$('.layui-table-tool').css("display","none");
layui.$('.layui-table-total').css("display","none");
// 处理分页条内容
layui.$('.layui-table-page').css("width","100%");
$('.layui-laypage-skip').remove();
layui.$('table').css("border-collapse","separate");
layui.$('table').css("border-spacing","0px 10px");
}
});
}
function selectDefault(){
$("a[data-level = 1]").click();
}
// 为导航栏目添加绑定事件
/*
该段js代码的核心就是当点击类型标签时，为对应的div 添加move 样式(上述css中有写)，
同时移除其他两个div的move样式,这样就可以实现页面滑动切换的效果啦．这样的动态效果还有很
多例如:旋转,栅格等等，感兴趣的读者朋友可以自行试验
*/
$('a[data-level=1]').click(function(e){
if($(this).hasClass("zui-this"))
return;
reloadTable("alarmLevelGrid1",{"alarmLevel":"1"});
resetSelectedStyle();
$(".zui-this").removeClass("zui-this");
$(this).addClass("zui-this");
renderSelectedStyle(this);
e.preventDefault();
$('#alarmLevel2').removeClass("move");
$('#alarmLevel1').removeClass("div-align-left");
$('#alarmLevel2').removeClass("div-align-right");
$('#alarmLevel3').removeClass("div-align-right");
$('#alarmLevel3').removeClass("move");
$('#alarmLevel1').toggleClass('move');
});
$('a[data-level=2]').click(function(e){
if($(this).hasClass("zui-this"))
return;
reloadTable("alarmLevelGrid2",{"alarmLevel":"2"});
resetSelectedStyle();
$(".zui-this").removeClass("zui-this");
$(this).addClass("zui-this");
renderSelectedStyle(this);
e.preventDefault();
$('#alarmLevel2').toggleClass('move');
$('#alarmLevel2').removeClass("div-align-right");
$('#alarmLevel2').removeClass("div-align-left");
$('#alarmLevel1').removeClass("move");
$('#alarmLevel3').removeClass("move");
});
$('a[data-level=3]').click(function(e){
if($(this).hasClass("zui-this"))
return;
reloadTable("alarmLevelGrid3",{"alarmLevel":"3"});
resetSelectedStyle();
$(".zui-this").removeClass("zui-this");
$(this).addClass("zui-this");
renderSelectedStyle(this);
e.preventDefault();
$('#alarmLevel1').removeClass("move");
$('#alarmLevel2').removeClass("move");
$('#alarmLevel1').toggleClass("div-align-right");
$('#alarmLevel2').toggleClass("div-align-right");
$('#alarmLevel1').removeClass("div-align-left");
$('#alarmLevel3').toggleClass('move');
});
// 由于css的就近原则，使用class 无法达到预期效果，使用jquery增加样式
function resetSelectedStyle(){
$(".zui-this").css("color","#333");
$(".zui-this").css("background-color","white");
}
function renderSelectedStyle(elem){
$(elem).css("color","white");
$(elem).css("background-color","#1e9fff");
}
// 表格重载
function reloadTable(gridLayId,params){
let baseParam = {"isMobile":true};
$.extend(true,baseParam,params);
table.reload(gridLayId,{
page: {
curr: 1
},
where : baseParam
});
}
// 返回
function getBack(){
clearContext();
history.back(-1);
}
// 清理空间
function clearContext(){
c.remove("searchParams");
}
function getUserName(d){
if(d.writeUser){
return d.writeUser.empName;
}
return "";
}
$(document).ready(function(){
selectDefault();
});
</script>
CSS实现页面切换时的滑动效果的更多相关文章
- css 实现页面加载中等待效果
<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta ...
- WOW.js和animate.css让页面滚动时显示动画
官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...
- Android中实现整个视图切换的左右滑动效果
Android中提供了一个Gallary,可以实现图片或者文本的左右滑动效果. 如何让整个视图都能实现左右滑动,达到类似于Gallary的效果呢?可以直接用一个开源的ViewFlow来实现. 项目 ...
- viewpager欢迎页面底部点的滑动效果
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layo ...
- vue 页面切换从右侧切入效果
1.将切换的页面用transition包裹 <div class="index-content"> <transition> <router-view ...
- CSS实现鼠标移入时图片的放大效果以及缓慢过渡
transform:scale()可以实现按比例放大或者缩小功能. transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html&g ...
- ViewPager之Fragment页面切换
一.概述 ViewPager是android-support-v4中提供的类,它是一个容器类,常用于页面之间的切换. 继上篇文章<ViewPager之引导页>之后,本文主要介绍ViewPa ...
- AngularJS应用页面切换优化方案
葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如本篇的在页面切换的过程中优化方案,欢迎大家跟 ...
- AngularJs应用页面切换优化方案（转）
目录[-] 前言 场景 使用resolve来提前请求数据 为页面加入切换动画 总结 葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研 ...
随机推荐
- docker学习一
由于本人学习精力有限,不能像大学时那样,每个笔记都认真的手敲记录,一些地方会截图展示,并会添加自己的理解和备注,建议大家也做自己的笔记,看别人的可以,但是自己动手并思考记忆更深刻. 1.什么是虚拟化 ...
- NodeRED - 全局变量的使用笔记
NodeRED - 全局变量的使用笔记 global global.get(..) :获取全局范围的上下文属性 global.set(..) :设置全局范围的上下文属性 global.keys(..) ...
- Kwp2000协议的应用（硬件原理使用篇）
作者:良知犹存 转载授权以及围观:欢迎添加微信:becom_me 发现K线没有过多的文章描述,作为一个开发过K线的人,不写些文章帮助后来的人岂不是太浪费开发经验了呢. 总述 KWP2000是一 ...
- P1714 切蛋糕 dp+单调队列
题意: 题目描述 在幻想乡,琪露诺是以笨蛋闻名的冰之妖精. 某一天,琪露诺又在玩速冻青蛙,就是用冰把青蛙瞬间冻起来.但是这只青蛙比以往的要聪明许多,在琪露诺来之前就已经跑到了河的对岸.于是琪露诺决定到 ...
- Codeforces Round #651 (Div. 2) A Maximum GCD、B GCD Compression、C Number Game、D Odd-Even Subsequence
A. Maximum GCD 题意: t组输入,然后输入一个n,让你在区间[1,n]之间找出来两个不相等的数a,b.求出来gcd(a,b)(也就是a,b最大公约数).让你求出来最大的gcd(a,b)是 ...
- Educational Codeforces Round 95 (Rated for Div. 2) C. Mortal Kombat Tower (DP)
题意:你和基友两人从左往右轮流打怪兽,强怪用\(1\)表示,垃圾用\(0\)表示,但基友比较弱,打不过强怪,碰到强怪需要用一次魔法,而你很强,无论什么怪都能乱杀,基友先打,每人每次至少杀一个怪兽,最多 ...
- 牛客算法周周练20 F.紫魔法师 (二分图染色)
题意:给你一张图,对其染色,使得相连的点的颜色两两不同求,最少使用多少种颜色. 题解:首先,若\(n=1\),只需要一种.然后我们再去判断是否是二分图,对于二分图,两种颜色就够了,若不是二分图,也就是 ...
- 【ybt金牌导航1-2-5】【luogu P3287】优美玉米 / 方伯伯的玉米田
优美玉米 / 方伯伯的玉米田 题目链接:ybt金牌导航1-2-5 / luogu P3287 题目大意 有一个数组,你可以每次给一个区间里面的值加一,要你使得最后剩下的最长单调不下降子序列最长. 思路 ...
- Atlas 分表功能
目录 分表原因 分表方式 Atlas 分表 分表思路 配置 Atlas 创建原表 创建分表 数据测试 分表原因 1.数据过多,访问缓慢 2.创建索引时重新排序,创建缓慢,并且占用大量的磁盘空间 分表方 ...
- oranges-给mini os 添加内存管理，进程多级反馈队列，进程内存完整性度量
参考: 内存管理: https://www.jianshu.com/p/49cbaccd38c5 crc校验 https://www.cnblogs.com/zzdbullet/p/9580502.h ...