H5易企秀

周末被领导叫回来加班，说要做一个易企秀一样的页面，然后就有这篇笔记

原计划用几百个计时器去执行，后面放弃了，太难改了，还是选择了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/[email protected]" id="page1_title" class="hide">
        <img src="img/[email protected]" id="page1_Lead" class="hide">
        <img src="img/[email protected]" id="page1_kaiShi" class="hide">
    </div>
    <div id="page2" class="page" style="display: none;" >
        <img src="img/tongYongBg.png"/>
        <img src="img/[email protected]" id="page2_title" class="hide">
        <img src="img/[email protected]" id="page2_wenZi" class="hide">
        <img src="img/[email protected]" 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上，

预告，下一期公司要做年会大屏幕抽奖

猜你喜欢