前言
本次主题只要探究的是spa单页面之间的相互滑动切换。
何为spa单页面:单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
我理解的是他更像一个弱化app应用,也就是层与层的切换(也就是显示隐藏),body就是那个最大的父盒子,每个层就是一个div(子盒子)。
先看代码
- css
body,html {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}
.viewport {width: 100%;height: 100%;display: -webkit-box;overflow: hidden;backface-visibility: hidden;position: relative;}
.pageview {position: absolute;top: 0;left: 0;display: none;width: 100%;height: 100%;text-align: center;color: #ffffff;}
.page-block {display: block;}
.pagecurr {animation: pageRight 400ms forwards;}
@keyframes pageRight {
from {transform: translate3d(100%, 0, 0);opacity: .9;}
to {transform: translate3d(0, 0, 0);opacity: 1;}
}
- html
<div id="viewport" class="viewport">
<div class="pageview page-block" style="background: #3b76c0;">
<h3>页面-1</h3>
</div>
<div class="pageview" style="background: #58c03b;">
<h3>页面-2</h3>
</div>
<div class="pageview" style="background: #c03b25;">
<h3>页面-3</h3>
</div>
</div>
- js
var els = document.querySelectorAll('.pageview')
for (var i = 0; i < els.length; i++) {
binds(els[i], i + 1)
}
function binds(el, n) {
el.onclick = function () {
console.log(this)
this.className = 'pageview'
addClass(n)
}
}
function addClass(n) {
for (var i = 0; i < els.length; i++) {
if (i === n) {
console.log('addClass', els[i], i)
els[i].className = 'pageview pagecurr page-block'
}
}
}
问题
这个问题有点小坑,也是困扰了许久。想让display从none变为block,或者从block变为none时,实现这样的动画效果大多数人都会采用transition。然而可惜的是transition并不支持display。
之前的思路是设置元素显示前:
div{display: none;transform: translate3d(100%, 0, 0)}
设置元素显示后:
div{display: block;transform: translate3d(0, 0, 0)}
所以后面改变思路,采用 @keyframes + animation 完成动画
@keyframes + animation
-
keyframes是CSS3才引进的 … 使用方法是前面@keyframes Demo , Demo是自定义动画名字
-
仅支持百分比为进度条和form-to!!!两者可以混用
- animation有八个参数,可以分开写,可以综合写(一般一起写);
- animation-name 规定 @keyframes 动画的名称。
- animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
- animation-timing-function 规定动画的速度曲线。默认是 “ease”。
- animation-delay 规定动画何时开始。默认是 0。
- animation-iteration-count 规定动画被播放的次数。默认是 1。
- animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
- animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
- animation-fill-mode 定义动画播放时间之外的状态,顾名思义,要么就是在动画播放完了之后给它一个状态none|forwards|backwards|both;none,播放完之后不改变默认行为,默认值;forwards则是停在动画最后的的那个画面;backwards则是回调到动画最开始出现的画面;both则应用为动画结束或开始的状态
综合写法: animation : name 1s linear 1s inifinite alternate running both;