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产品,另外,在研 ...
随机推荐
- Java排序算法（四）希尔排序1
希尔排序交换法:分组+冒泡排序组合 一.测试类SortTest import java.util.Arrays; public class SortTest { private static fina ...
- D - Seek the Name, Seek the Fame
The little cat is so famous, that many couples tramp over hill and dale to Byteland, and asked the l ...
- 2020 ICPC Universidad Nacional de Colombia Programming Contest
2020 ICPC Universidad Nacional de Colombia Programming Contest A. Approach 三分 显然答案可以三分,注意\(eps\)还有两条 ...
- Educational Codeforces Round 90 (Rated for Div. 2) B. 01 Game（字符串博弈）
题目链接:https://codeforces.com/contest/1373/problem/B 题意 给出一个二进制串 $s$,Alica 和 Bob 每次可以选择移去 $s$ 中的一个 $10 ...
- Educational Codeforces Round 89 (Rated for Div. 2) C. Palindromic Paths（贪心）
题目链接:https://codeforces.com/contest/1366/problem/C 题意 有一个 $n \times m$ 的 $01$迷宫,要使从 $(1,1)$ 到 $(n,m) ...
- Gym - 102861B 、Gym - 102861F、Gym 102861G、Gym 102861L、Gym 102861N、Gym 101968C、Gym 101968D
训练赛链接:https://vjudge.net/contest/410049#problem/D Gym - 102861B 题意: 在一个二维平面上,给你一个船,问你在这个二维平面上有没有船重叠. ...
- KMP（算法描述）
#include<iostream> using namespace std; const int N=10010,M=100010; int n,m; char p[N],s[M]; i ...
- POJ2785 4 Values whose Sum is 0 (二分)
题意:给你四组长度为\(n\)序列,从每个序列中选一个数出来,使得四个数字之和等于\(0\),问由多少种组成情况(仅于元素的所在位置有关). 题解:\(n\)最大可以取4000,直接暴力肯定是不行的, ...
- Codeforces Round #667 (Div. 3) D. Decrease the Sum of Digits (贪心)
题意:给你一个正整数\(n\),每次可以对\(n\)加一,问最少操作多少次是的\(n\)的所有位数之和不大于\(s\). 题解:\(n\)的某个位置上的数进位,意味这后面的位置都可以被更新为\(0\) ...
- OkHttp Client Ignore certificate
import okhttp3.*; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import javax.net.ssl.*; i ...