新浦京81707con > 注册购买 > 下拉刷新,css3动画事件

原标题:下拉刷新,css3动画事件

浏览次数:71 时间:2019-07-03

  用css3的animation完毕二个动画片,当唯有那些动画完结时才实践令四个风浪,例如让动画片保持在甘休的气象或其余一些事件。大家该如何做呢。

  用css3的animation实现一个动画片,当唯有这一个动画达成时才推行令八个平地风波,比如让动画保持在甘休的状态或其余部分事变。大家该如何做吧。

菜鸟,直接贴代码了

  第一种艺术:

  第一种方法:

<!DOCTYPE html>
<html class="">
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="css/amazeui.min.css" />
<link rel="stylesheet" href="css/acjl.css" />
<link rel="stylesheet" href="css/ydac_pm.css" />
<link href="css/mobiscroll.custom-2.15.1.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mobiscroll.custom-2.15.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth/20 "px";
</script>

    用放大计时器,设定一个和卡通片时间长度同样的time,过time事件去实行那一个函数。

    用定时器,设定叁个和卡通时间长度同样的time,过time事件去实践这一个函数。

<style type="text/css">
#receivableSheet ul li.title{font-weight: bold;color: #333;height: 40px;line-height: 40px;}
#receivableSheet .name{text-align: left;width: 33%;display: inline-block;float: left;}
#receivableSheet .receivable{text-align: center;width: 33%;display: inline-block;float: left;}
#receivableSheet .receivableed{text-align: right;width: 33%;display: inline-block;float: left;}
#wrapper { position:absolute; z-index:1; top:3rem; bottom:0.8rem; left:0.8rem;width:18.4rem;background:#fff;overflow:auto;}
#scroller { position:relative; /* -webkit-touch-callout:none;*/ -webkit-tap-highlight-color:rgba(0,0,0,0); float:left;width:100%;padding:0; }
#scroller ul { position:relative;list-style:none;padding:0;margin:0;width:100%;text-align:left;}
#scroller li {padding:0 10px;height:40px; line-height:40px;border-bottom:1px solid #ccc;border-top:1px solid #fff;background-color:#fafafa;font-size:0.8rem;}
#scroller li > a {display:block;}
/** ** 下拉样式 Pull down styles * */
#pullDown{ background:#fff; height:40px;line-height:40px;padding:5px 10px; border-bottom:1px solid #ccc;font-weight:bold;font-size:14px;color:#888;}
#pullUp{background:#fff; height:40px; line-height:40px; padding:5px 10px; font-weight:bold;font-size:14px;color:#888;width: 100%;}
#pullDown .pullDownIcon { display:block; float:left; width:30px; height:30px;background:url(css/pull-icon@2x.png) 0 0 no-repeat;-webkit-background-size:30px 60px; background-size:30px 60px;-webkit-transition-property:-webkit-transform;-webkit-transition-duration:250ms; }
#pullUp .pullUpIcon { display:block; float:left; width:30px; height:30px;background:url(css/pull-icon@2x.png) 0 0 no-repeat; -webkit-background-size:30px 60px; background-size:30px 60px;background-position:0 100%; -webkit-transition-property:-webkit-transform;-webkit-transition-duration:250ms; }
#pullDown .pullDownIcon { -webkit-transform:rotate(0deg) translateZ(0); }
#pullUp .pullUpIcon { -webkit-transform:rotate(-180deg) translateZ(0); }
/** * 动画功效css3代码 */
#pullDown.flip .pullDownIcon { -webkit-transform:rotate(-180deg) translateZ(0); }
#pullUp.flip .pullUpIcon { -webkit-transform:rotate(0deg) translateZ(0); }
#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon { background-position:0 100%; -webkit-transform:rotate(0deg) translateZ(0);-webkit-transition-duration:0ms;-webkit-animation-name:loading;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;}
@-webkit-keyframes loading {
from { -webkit-transform:rotate(0deg) translateZ(0); }
to { -webkit-transform:rotate(360deg) translateZ(0); }
}

    setTimeout(function(){ },time);

    setTimeout(function(){ },time);

</style>

  第两种方法:

  第二种艺术:

<title>iscroll 下拉刷新,上拉加载</title>
</head>
<body id="receivableSheet">
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
</div>
<ul class="sheet" id="thelist">
<li class="title">
<span class="name">姓名</span>
<span class="receivable">待回款</span>
<span class="receivableed">已回款</span>
</li>
<li class="list">
<span class="name">李大国</span>
<span class="receivable">2000000.00元</span>
<span class="receivableed">4000000.00元</span>
</li>
</ul>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更加多</span>
</div>
</div>
</div>
<div class="noDate" style="display: none;" >暂无数据</div>
<script src="js/iscroll.js" type="text/javascript" charset="utf-8"></script>

      当-webkit-animation动画截止时有八个webkitAnimationEnd事件,只要监听那么些事件就能够了。

      当-webkit-animation动画截至时有多个webkitAnimationEnd事件,只要监听那一个事件就足以了。

 

  例子:

  例子:

<script type="text/javascript">

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="@my_programmer">
<title>webkitAnimationEnd</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
#div{
width:200px;
height:200px;
background:#f60;
margin:100px auto;
-webkit-transition: all ease 1s;
}
.change{
-webkit-animation: transform 1s 2 ease;
}
@-webkit-keyframes transform {
0% { -webkit-transform: scale(1)}
30% { -webkit-transform: scale(2)}
60% { -webkit-transform: scale(0.5)}
100% { -webkit-transform: scale(1)}
}
</style>
</head>
<body>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="@my_programmer">
<title>webkitAnimationEnd</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
#div{
width:200px;
height:200px;
background:#f60;
margin:100px auto;
-webkit-transition: all ease 1s;
}
.change{
-webkit-animation: transform 1s 2 ease;
}
@-webkit-keyframes transform {
0% { -webkit-transform: scale(1)}
30% { -webkit-transform: scale(2)}
60% { -webkit-transform: scale(0.5)}
100% { -webkit-transform: scale(1)}
}
</style>
</head>
<body>

var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,liNum,
generatedCount = 0;
console.log("高度为" $("#wrapper").height())
liNum=parseInt($("#wrapper").height()/40);//每条li的万丈为40,一页面显示的li的个数
console.log("列表的多寡" liNum)
listLoad();
function listLoad () {
set提姆eout(function () { // 数据加载后运行电磁照拂计时器,刷新数据
for (i=0; i<liNum-1; i ) {
$("#thelist").append($($(".list")[0]).clone())//首页显示的多少,不用管
}
myScroll.refresh(); //数据加载成功后,调用分界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 100); // <-- Simulate network congestion, remove setTimeout from production!
}
/**
* 下拉刷新 (自定义达成此格局)
* myScroll.refresh(); // 数据加载成功后,调用分界面更新方法
*/
function pullDownAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
myScroll.refresh(); //数据加载成功后,调用分界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}

<div id="div"></div>

<div id="div"></div>

/**
* 滚动翻页 (自定义达成此办法)
* myScroll.refresh(); // 数据加载成功后,调用分界面更新方法
*/
function pullUpAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
for (i=0; i<5; i ) {
li = document.createElement('li');
li.innerText = '增加三冰 ' ( generatedCount);
el.appendChild(li, el.childNodes[0]);//上拉追加的数码,拉到页面最底进行加载数据
}
myScroll.refresh(); // 数据加载成功后,调用分界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}

本文由新浦京81707con发布于注册购买,转载请注明出处:下拉刷新,css3动画事件

关键词: 新浦京81707con javascript CSS3 iscroll 下拉刷新 上拉加

上一篇:最小化安装

下一篇:没有了