将缓动动画效果应用于JavaScript滑动窗体

时间:2017-06-23 18:37:34

标签: javascript css3

我使用从教程中找到的JavaScript构建了一个从屏幕右侧滑入/滑出的表单。一切都有效,但评论它的人觉得动画看起来太过'#34;机器人" (或线性)。有人建议我尝试为幻灯片添加类似CSS3的缓动效果并滑出JavaScript动画。我想这样做,但与此同时,我不想a)重做我已经设置的所有代码,因为它确实有效,所以我不想废弃它所有并重新开始,并且b)使现有的功能太复杂或混乱,只是为了创建一个缓和效果。

这是我现在拥有的JavaScript:

var slidingDiv = document.getElementById("slider");

/*
 ------------------------------------------------------------
 Function to activate form button to open the slider.
 ------------------------------------------------------------
 */

function open_panel() {
    slideIt();
    var a = document.getElementById("sidebar");
    a.setAttribute("id", "sidebar1");
    a.setAttribute("onclick", "close_panel()");
}
/*
 ------------------------------------------------------------
 Function to slide the sidebar form (open form)
 ------------------------------------------------------------
 */
function slideIt() {
    var stopPosition = -20;
    if (parseInt(slidingDiv.style.right) < stopPosition) {
        slidingDiv.style.right = parseInt(slidingDiv.style.right) + 3 + "px";
        setTimeout(slideIt, 0);
    }
}
/*
 ------------------------------------------------------------
 Function to activate form button to close the slider.
 ------------------------------------------------------------
 */
function close_panel() {
    slideIn();
    a = document.getElementById("sidebar1");
    a.setAttribute("id", "sidebar");
    a.setAttribute("onclick", "open_panel()");
}
/*
 ------------------------------------------------------------
 Function to slide the sidebar form (slide in form)
 ------------------------------------------------------------
 */
function slideIn() {
    var slidingDiv = document.getElementById("slider");
    var stopPosition = -320;
    if (parseInt(slidingDiv.style.right) > stopPosition) {
        slidingDiv.style.right = parseInt(slidingDiv.style.right) - 2 + "px";
        setTimeout(slideIn, 1);
    }

}

这是表单HTML

<div id="slider" style="right: -320px;" class="register-photo">
    <div class="form-inner">
        <div class="form-container">
            <form method="post" action="#" id="browserHangForm">
                <a id="sidebar" onclick="open_panel()">
                    <span id="arrow" class="glyphicon glyphicon-arrow-left icon-arrow"></span>
                </a>
                <div class="form-group">
                    <input class="form-control" type="text" name="first_name" placeholder="*First Name" autofocus="">
                </div>
                <div class="form-group">
                    <input class="form-control" type="email" name="last_name" placeholder="*Last Name" autofocus="">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="Email" placeholder="*Email" autofocus="">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="Company" placeholder="*Company" autofocus="">
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-block button-submit" type="submit">Submit</button>
                </div>
                <br/>
                <a href="privacy-policy" class="already" target="_blank"><span
                        class="glyphicon glyphicon-lock icon-lock"></span>We will never share your information.</a>
            </form>
        </div>
    </div>
</div>

这是最相关的CSS:

html{
    max-width: 100% !important;
    overflow-y: scroll;
    position: static;
    overflow-x: hidden !important;
}
.register-photo {
    margin-top: 101px;
    z-index: 99;
    position: fixed;
}

.register-photo .form-container{
    z-index: 9;
    display: block;
    background-color: white;
}

a:active{
    background-color: transparent;
}

.button-submit{
    margin-bottom: 15px;
}

1 个答案:

答案 0 :(得分:0)

我决定撕掉笨重的JavaScript代码并将其替换为jQuery,它似乎更清晰,更易于维护。找到了许多困扰我的东西(减少了css ID的使用并使它们成为类,删除了内联函数调用,并将滑动效果更改为由一个函数而不是4来控制

$(document).ready(function () {
//This function checks if we are in mobile view or not to determine the
//UI behavior of the form.
    window.onload = checkWindowSize();

    var arrowicon = $(".arrow");
    var overlay = $("#overlay");
    var slidingDiv = $(".slider");
    var closeBtn = $(".closeBtn");
    var mobileBtn = $(".mobile-btn");

//When the page loads, check the screen size.
//If the screen size is less than 768px, you want to get the function
//that opens the form as a popup in the center of the screen
//Otherwise, you want it to be a slide-out animation from the right side
    function checkWindowSize() {
        if ($(window).width() <= 768) {
            //get function to open form at center of screen
            setTimeout(formModal, 5000);
            function formModal() {
                slidingDiv.addClass("showForm")
                overlay.addClass("showOverlay");
                overlay.removeClass('hideOverlay');
                mobileBtn.addClass("hideBtn");
            }
        }
        else {
            //when we aren't in mobile view, let's just have the form slide out from the right
            setTimeout(slideOut, 5000);
            function slideOut() {
                slidingDiv.animate({'right': '-20px'}).addClass('open');
                arrowicon.addClass("glyphicon-arrow-right");
                arrowicon.removeClass("glyphicon-arrow-left");
                overlay.addClass("showOverlay");
                overlay.removeClass("hideOverlay");
            }
        }
    }

    /*
     ------------------------------------------------------------
     Functions to open/close form like a modal in center of screen in mobile view
     ------------------------------------------------------------
     */

    mobileBtn.click(function () {
        slidingDiv.addClass("showForm");
        slidingDiv.removeClass("hideForm");
        overlay.addClass("showOverlay");
        overlay.removeClass('hideOverlay');
        mobileBtn.addClass("hideBtn");
    });
    closeBtn.click(function () {
        slidingDiv.addClass("hideForm");
        slidingDiv.removeClass("showForm");
        overlay.removeClass("showOverlay");
        overlay.addClass("hideOverlay")
        mobileBtn.removeClass("hideBtn");
    });


    /*
     ------------------------------------------------------------
     Function to slide the sidebar form out/in
     ------------------------------------------------------------
     */
    arrowicon.click(function () {
        if (slidingDiv.hasClass('open')) {
            slidingDiv.animate({'right': '-390px'}).removeClass('open');
            arrowicon.addClass("glyphicon-arrow-left");
            arrowicon.removeClass("glyphicon-arrow-right");
            overlay.removeClass("showOverlay");
            overlay.addClass("hideOverlay");

        } else {
            slidingDiv.animate({'right': '-20px'}).addClass('open');
            arrowicon.addClass("glyphicon-arrow-right");
            arrowicon.removeClass("glyphicon-arrow-left");
            overlay.addClass("showOverlay");
            overlay.removeClass("hideOverlay");
        }

    });

});