import $ from 'jquery';

function inAnimate() {
    var windowHeight = $(window).height(); //窗口高度
    var element;

    var dataAnimateEl = $('[data-animate]');
    if (dataAnimateEl.length > 0 || dataAnimateEl.length == 0) {
        dataAnimateEl.each(function () {
            element = $(this);
            element.css('opacity', '0');
            // 元素在可视区域，即刻开始动画
            animationStart(element)
        })
    }

    // 监听页面滚动，开始动画
    $(window).scroll(function (event) {
        var dataAnimateEl = $('[data-animate]');
        if (dataAnimateEl.length > 0 || dataAnimateEl.length == 0) {
            dataAnimateEl.each(function () {
                element = $(this);
                // 元素在可视区域，即刻开始动画
                animationStart(element)

            })
        }
    });

    //开始动画
    function animationStart(element) {

        var annimationVal = element.data("animate");
        if (viewingArea(element)) {
            element.css('opacity', '1');
            element.addClass(annimationVal)
        } else {
            // element.removeClass(annimationVal)  // 重载动画
            // element.removeClass(annimationVal).addClass(annimationVal)
        }
        $(element).on('animationend', function () {
            $(this).removeAttr('data-animate')
            $(this).removeClass(annimationVal);
        })
    }

    //函数作用：计算元素是否到达可视区域
    function viewingArea(element) {
        let objHeight = $(element).offset().top; //元素到顶部的高度
        let winPos = $(window).scrollTop(); //距离顶部滚动
        let val = objHeight - winPos;
        if (val < windowHeight - 150 && val > 0) {
            //可视区域
            return true;
        } else {
            //不可视区域
            return false;
        }
    }
}
export default {
    inAnimate: inAnimate
}