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产品,另外,在研 ...
随机推荐
- apache 创建多端口监听
httpd.conf 将 #LoadModule vhost_alias_module modules/mod_vhost_alias.so 改为 LoadModule vhost_alias_mod ...
- Java排序算法（三）直接插入排序
一.测试类SortTest import java.util.Arrays; public class SortTest { private static final int L = 20; publ ...
- 聊聊elasticsearch7.8的模板和动态映射
最近想写一篇es的索引的一个设计,由于设计的东西特别多,当然,elasticsearch的模板和动态映射也是其中的一个设计点,所以干脆先来聊聊索引的模板和动态映射,模板,听这个名字就相当于一些公共可用 ...
- 【noi 2.7_7219】复杂的整数划分问题（算法效率）
题意:若干组数据,分别问 N划分成K个正整数之和的划分数目.N划分成若干个不同正整数之和的划分数目.N划分成若干个奇正整数之和的划分数目. 解法:请见我之前的一篇博文内的Article 2--[noi ...
- codeforces632D. Longest Subsequence (最小公倍数)
You are given array a with n elements and the number m. Consider some subsequence of a and the value ...
- Codeforces Round #670 (Div. 2) B. Maximum Product (暴力)
题意:有一长度为\(n\)的序列,求其中任意五个元素乘积的最大值. 题解:先排序,然后乘积能是正数就搞正数,模拟一下就好了. 代码: int t; ll n; ll a[N]; int main() ...
- 在.NET中体验GraphQL
前言 以前需要提供Web服务接口的时候,除了标准的WEBAPI形式,还考虑了OData.GraphQL等形式,虽然实现思路上有很大的区别,但对使用方来说,都是将查询的主动权让渡给了前端,让调用方能够更 ...
- CDN 概述
占位 CDN(Content Delivery Network)内容发布网络 推荐Blog: CDN 学习笔记
- java中string,stringBuffer和StringBuider
最近学习到StringBuffer,心中有好些疑问,搜索了一些关于String,StringBuffer,StringBuilder的东西,现在整理一下. 关于这三个类在字符串处理中的位置不言而喻,那 ...
- node.js 怎么扩大默认的分配的最大运行内存
node.js 怎么扩大默认的分配的最大运行内存 $ node --max-old-space-size=4096 app.js $ NODE_OPTIONS=--max-old-space-size ...