周末被领导叫回来加班，说要做一个易企秀一样的页面，然后就有这篇笔记
原计划用几百个计时器去执行，后面放弃了，太难改了，还是选择了animate.css插件，这是一个纯css的插件，只需要引入css就行了
先分析需要什么功能
- 确定要几个页面，页面不能滚动
- 页面通过一个箭头进入下一页，还要监听手势向上滑向下滑
- 进入新的页面一开始必须是空的，然后再用动画把图片文字显示出来
- 插件的使用是给dom元素添加class，监听动画结束后去除class就行
- 进入要有动画，离开要有反方向动画
// 这是插件建议给的用法
function animateCSS(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add('animated', animationName)
function handleAnimationEnd() {
node.classList.remove('animated', animationName)
node.removeEventListener('animationend', handleAnimationEnd)
if (typeof callback === 'function'){
// 动画结束接入下一个动画
callback()
}
}
node.addEventListener('animationend', handleAnimationEnd)
}
// 使用
animateCSS('.my-element', 'bounce', function() {
// 下一个动画
})
但是上面只能传一个参数，但是这个插件除了动画参数还有执行速度还有执行时间
// animated 必要
// bounce 动画效果必要
// 执行速度也就是总时间，可以不要
// 几秒后开始，可以不要
<div class="animated bounce faster delay-2s">Example</div>
改下代码支持多个传参
var node = document.querySelector(element)
function handleAnimationEnd() {
node.classList.remove('animated', ...animationName)
node.removeEventListener('animationend', handleAnimationEnd)
if (typeof callback === 'function'){
// 动画结束接入下一个动画
callback()
}
}
node.addEventListener('animationend', handleAnimationEnd)
node.classList.add('animated', ...animationName)
// 使用
animateCSS('.my-element', ['bounce','delay-2s'], function() {
// 下一个动画
})
正式开始
css就自己写吧，贴出来太长了
app是全屏，禁止滚动，超出隐藏
下面的page每个都是占满全屏就行
page里的元素都是相对page的定位
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<div id="app">
<div id="page1" class="page">
<img src="img/indexBg.png" />
<img src="img/biaoTi@2x.png" id="page1_title" class="hide">
<img src="img/Lead@2x.png" id="page1_Lead" class="hide">
<img src="img/kaiShi@2x.png" id="page1_kaiShi" class="hide">
</div>
<div id="page2" class="page" style="display: none;" >
<img src="img/tongYongBg.png"/>
<img src="img/biaoTi2@2x.png" id="page2_title" class="hide">
<img src="img/1@2x.png" id="page2_wenZi" class="hide">
<img src="img/kaiShi2@2x.png" id="page2_kaiShi" class="hide">
</div>
...
</div>
<div>
<div id="nextBtn" style="display: none;" onclick="touchDown()">
<img src="img/next.png" class="animated bounce infinite">
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
// 当前页数
var nowPage = 0
// 所有页数的id存储器
var pageArr = ["page1","page2"]
// 是不是可以进入下一页的标记，需要等动画结束才能进入下一页
var flag = false
function init(){
// 给window添加滑动时间监听
last_next()
// 初始化全部
allhide()
// 初始化第一个页面
page1()
}
init()
function allhide(){
$('.hide').hide()
}
function animateCSS(element, animationName, callback) {
var node = document.querySelector(element)
function handleAnimationEnd() {
node.classList.remove('animated', ...animationName)
node.removeEventListener('animationend', handleAnimationEnd)
if (typeof callback === 'function'){
// 动画结束接入下一个动画
callback()
}
}
node.addEventListener('animationend', handleAnimationEnd)
node.classList.add('animated', ...animationName)
// 上面hide隐藏的元素在执行动画的时候要重新显示
$(node).show()
}
function animateCSSOut(element, animationName, callback) {
var node = document.querySelector(element)
function handleAnimationEnd() {
node.classList.remove('animated', ...animationName)
node.removeEventListener('animationend', handleAnimationEnd)
// 退出动画结束后隐藏
$(node).hide()
if (typeof callback === 'function'){
// 动画结束接入下一个动画
callback()
}
}
node.addEventListener('animationend', handleAnimationEnd)
node.classList.add('animated', ...animationName)
}
function last_next(){
var start = 0
document.body.addEventListener("touchstart",function(e){
start = e.changedTouches[0].pageY
})
// 微信页面向上向下拖动会出现橡皮筋，应该取消掉，就是组织页面的touch事件
// 但是普通页面不能这么做，这样连列表都不能滚动
document.body.addEventListener("touchmove",function(e){
e.preventDefault();
},{passive: false})
document.body.addEventListener("touchend",function(e){
var end = e.changedTouches[0].pageY;
if(end>start+100 && flag){
touchDown()
console.log("向下滑")
}else if(start>end+100 && flag){
touchUp()
console.log("向上滑")
}
})
}
function page1(){
animateCSS("#page1_title",["fadeInDownBig"])
animateCSS("#page1_Lead",["zoomInLeft","slow"],function(){
animateCSS("#page1_wenZi",["bounceInUp"],function(){
animateCSS("#page1_kaiShi",["bounceInRight"])
$("#nextBtn").show()
flag = true
})
})
}
function page1out(cb){
animateCSSOut("#page1_Lead",["zoomOutRight"])
animateCSSOut("#page1_wenZi",["bounceOutDown"])
animateCSSOut("#page1_kaiShi",["bounceOutRight"])
animateCSSOut("#page1_title",["fadeOutUpBig"],function(){
cb()
})
}
function page2(cb){
animateCSS("#page2_title",["fadeInDownBig"])
animateCSS("#page2_wenZi",["flipInY","slow"],function(){
animateCSS("#page2_kaiShi",["rubberBand"])
$("#nextBtn").show()
flag = true
})
}
function page2out(cb){
$('#page2_kaiShi').hide()
animateCSSOut("#page2_wenZi",["flipOutY"])
animateCSSOut("#page2_title",["fadeOutUpBig"],function(){
cb()
})
}
function touchUp(){
$("#nextBtn").hide()
flag = false
window[pageArr[nowPage]+"out"](function(){
var lastPage = nowPage;
if(lastPage==pageArr.length-1){
nowPage = 0
}else{
nowPage++;
}
// 上一页效果
$("#"+pageArr[nowPage]).css({
"display":"block",
"z-index":"100"
})
animateCSS('#'+pageArr[nowPage], ['fadeInUp'],function(){
$("#"+pageArr[lastPage]).css({
"display":"none",
"z-index":"1"
})
$("#"+pageArr[nowPage]).css({
"z-index":"1"
})
window[pageArr[nowPage]]()
})
})
}
function touchDown(){
$("#nextBtn").hide()
flag = false
window[pageArr[nowPage]+"out"](function(){
var lastPage = nowPage;
if(lastPage==0){
nowPage = pageArr.length - 1
}else{
nowPage--;
}
// 下一页效果
$("#"+pageArr[nowPage]).css({
"display":"block",
"z-index":"100"
})
animateCSS('#'+pageArr[nowPage], ['fadeInDown'],function(){
$("#"+pageArr[lastPage]).css({
"display":"none",
"z-index":"1"
})
$("#"+pageArr[nowPage]).css({
"z-index":"1"
})
window[pageArr[nowPage]]()
})
})
}
小模块，加班就当练练手了，在加上一个右上角的音频播放，就跟易企秀很像了
代码上传到github上，
预告，下一期公司要做年会大屏幕抽奖