TabStrip左栏目触发右图片区向上渐显动画

admin

本次脚本在模板220117验证。

DIV：
<div class="product container py-5">
    <div class="row">
        <div class="d-flex ul-lg-3 eye margin-t-5 bg-li-white">$func_tabstrip(navi=nav,para=Product,disp=2,len=8,rows=6,title=11)$
        </div>
    </div>
</div>


JS：
var o, len, last, timer;
$(function () {
    o = $(".product .Content .TabNavContent .TabContent").removeAttr("style");
    $(".product .Content").css({ "overflow": "hidden" });
    len = o.length;
    last = len - 1;
    var i=0;
    $(".TabTitle").on("mouseout", function () { ShowTabContent("", i, len); });
    ShowTabContent("", i, len);
});
function ShowTabContent(id, i, j) {
    clearTimeout(timer);
    if (i == 0) { last = len - 1; }
    console.log(i + "," + last);
    o.attr("animate", "backOutUp").removeClass("hide");
    o.eq(i).attr("animate", "backInUp");
    last = parseInt(i);
    i = 1 + parseInt(i);
    if (parseInt(i) >= parseInt(len)) { i = 0; }
    timer = setTimeout(function () { ShowTabContent(id, i, j) }, 5000);
}

CSS：
@keyframes backOutUp {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    20% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: translateY(-700px) scale(0.4);
        opacity: 0.4;
        display: none !important;
    }
}

[animate=backOutUp] {
    animation-name: backOutUp;
    animation-duration: 1s;
    display: none !important;
}

@keyframes backInUp {
    0% {
        transform: translateY(1200px) scale(0.4);
        opacity: 0.4;
        display: flex !important;
    }

    80% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

[animate=backInUp] {
    animation-name: backInUp;
    animation-duration: 1s;
}