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产品,另外,在研 ...
随机推荐
- dedecms文章页的上下篇颠倒的问题
dedecms的文章页底下的上下篇,如果按照时间排序的话,最新的一篇应该是最上了,但是底下还是会显示上一篇文章还有,然后下一篇文章没有了,就是颠倒了.如何修改呢. 1.修改include目录下arc. ...
- 【uva 1312】Cricket Field（算法效率--技巧枚举）
题意:一个 L*R 的网格里有 N 棵树,要求找一个最大空正方形并输出其左下角坐标和长.(1≤L,R≤10000, 0≤N≤100) 解法:枚举空正方形也就是枚举空矩阵,先要固定一个边,才好继续操作. ...
- Kuroni and the Punishment CodeForces - 1305F 随机函数mt19937 + 质因子分解
题意: 给你n个数,你每次操作可以对一个数加1或者减1,让你求你最少需要操作多少次可以使这n个数的公因子大于1 题解: 正常方法就是枚举质因子(假设质因子为x),然后对于这个数组中的数a[i],让a[ ...
- Atcoder Beginner Contest 168 D - .. (Double Dots) (BFS)
题意:有\(n\)个房间,在这些房间中两两连\(m\)次条边,问除了第一个房间,其他房间走到第一个房间的最短路径,输出这个房间所连的上一个房间,如果走不到,输出\(no\). 题解:刚开始我写了一个d ...
- Centos7 搭建Nginx+rtmp+hls直播推流服务器
1 准备工具 使用yum安装git [root~]# yum -y install git 下载nginx-rtmp-module,官方github地址 // 通过git clone 的方式下载到服务 ...
- Kubernets二进制安装(16)之安装部署traefik(ingress)
K8S的DNS实现了服务在集群"内"被自动发现,如何使得服务在Kuberneters集群"外"被使用和访问呢,有二种方法 1)使用NodePort型的Servi ...
- Zabbix 监控网站
官网教学步骤 配置 Web 监控 创建 Web 场景 配置 Web 场景 配置 Web 监控步骤 一共划分为 5 个步骤: 监测访问登录页面 模拟登录功能 # sid 变量的值 regex:name= ...
- c# App.xaml
随着wpf自动创建的,是项目的起始点..Net先再App里找,找到了window然后开启window,项目真正的起始点是在App里. 这两个 (App 的xaml和cs文件)和MainWindow 的 ...
- GitHub Sponsors
GitHub Sponsors https://github.com/sponsors https://github.com/sponsors/xgqfrms?preview=true https:/ ...
- Flutter framework & Flutter basics
Flutter framework & Flutter basics https://flutter.dev/docs/get-started/learn-more UI widgets ht ...