H5 easy to show prices

Leadership is called back to work overtime on weekends, said to do a ECHINFO show the same page, then there is this note

Original plans to use timers to execute hundreds, later abandoned, too difficult to change, or select the animate.cssplug-in, which is a pure plug-css, css only need to introduce on the line

Plug the official website of
the drop-down box official website of the bad copy I found an article friends

The first analysis of what needs to function

To determine the number of pages, the page can not scroll
Go to the next page by an arrow, but also to listen to decline upward slide gesture
Enter a new page beginning must be empty, and then use the displayed image text animation
Using plug-ins that add class to the dom element, after the removal of class monitor animation on the line
Have entered the animation, have left the opposite direction animation

// 这是插件建议给的用法
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() {
  // 下一个动画
})

But above can only pass a parameter, but in addition to this plug-in parameters as well as the animation execution speed as well as the execution time

// animated 必要
// bounce 动画效果必要
// 执行速度也就是总时间，可以不要
// 几秒后开始，可以不要
<div class="animated bounce faster delay-2s">Example</div>

Change the code to support a plurality of transmission parameters

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() {
  // 下一个动画
})

Started
css write it on their own, posted too long
app is full screen, scrolling is prohibited, hidden beyond
the following page is filled full screen on the line every
page in the page elements are positioned relative

<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]]()
        })
    })

}

Small module, work overtime when practice your hand, and in the upper right corner of a plus audio playback, just like the show ECHINFO
code is uploaded to github,

Notice the next annual meeting of the company to do the big screen draw

H5 easy to show prices

Guess you like