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产品,另外,在研 ...
随机推荐
- TZOJ6556: 嗅探器
最近在练Tarjan,看到这道题目分类在割点里面就想尝试做一下,点开发现题目数据范围竟然如此之小,算了,bfs暴力一发. 题目意思就是你需要找到一个关键节点,也可以理解成,行军打仗时必需经过的地方,敌 ...
- js实现购物车左滑删除
使用 js 和jquery动画实现购物车左滑,请引入jquery库,不然会报错哦! 首页编写页面,注意布局,滑动分成两部分,商品图片和信息放在一个布局,删除和移入收藏放在一起. 其中js用到了 tou ...
- B - 规律题2
10 123456 1:f(y)=1+2+3+4+5+6=21 2:f(y)=3 3 3 b进制,<b; 10 123 1+2+3=6;是3的倍数 1234 =(999)*1+99 ...
- Codeforces Round #673 (Div. 2) B. Two Arrays（数学）
题目链接:https://codeforces.com/contest/1417/problem/B 题意 定义 $f(a)$ 为数组 $a$ 中满足: $i < j$ $a_i + a_j = ...
- Educational DP Contest E - Knapsack 2 (01背包进阶版)
题意:有\(n\)个物品,第\(i\)个物品价值\(v_{i}\),体积为\(w_{i}\),你有容量为\(W\)的背包,求能放物品的最大价值. 题解:经典01背包,但是物品的最大体积给到了\(10^ ...
- 牛客编程巅峰赛S1第11场 - 黄金&钻石 A.牛牛的01游戏 (模拟栈)
题意:有一个\(01\)串,两个相邻的\(0\)可以变成一个\(1\),两个相邻的\(1\)可以直接消除,问操作后的字符串. 题解:数组模拟栈直接撸,上代码吧. 代码: class Solution ...
- Nacos学习与实战
1. 什么是Nacos 官网:https://nacos.io/zh-cn/index.html Nacos是阿里巴巴集团开源的项目,Nacos 致力于帮助您发现.配置和管理微服务. Nacos提供了 ...
- 【Azure 微服务】基于已经存在的虚拟网络(VNET)及子网创建新的Service Fabric并且为所有节点配置自定义DNS服务
问题描述 创建新的Service Fabric集群,可以通过门户,Powershell命令,或者是ARM模板.但是通过门户和PowerShell命令时,创建的SF集群都会自动新建一个虚拟网络而无法使用 ...
- 牛客国庆2 F-平衡二叉树【非原创】
题目:戳这里 学习博客:戳这里
- redis持久化-AOF
1.aof文件写入与同步 2.aof重写 重写的目的是为了减小aof文件的体积,redis服务器可以创建一个新的aof文件来代替现有的aof文件,新文件不会有冗余的命令. BGREWRITEAOF:遍 ...