如何为Cookie同意表单添加滑入滑出动画效果？

没问题！咱们可以通过CSS过渡动画结合JavaScript来实现这个流畅的滑入滑出效果，比直接切换display属性要自然得多。我帮你调整一下代码，一步步来：

第一步：调整CSS样式 #

首先修改.cookie-warning的基础样式，给它添加过渡动画和初始位置，让表单默认藏在视口底部外面，再通过类来触发滑入效果：

.cookie-warning {
    background-color: #078fa1;
    color: #ffffff;
    position: fixed;
    z-index: 10000;
    left: 0;
    bottom: 0;
    width: 100%;
    box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.39);
    /* 添加过渡动画，控制动画时长和曲线 */
    transition: transform 0.3s ease-in-out;
    /* 初始状态：完全移出视口底部 */
    transform: translateY(100%);
}

/* 滑入时的状态：回到视口内 */
.cookie-warning.active {
    transform: translateY(0);
}

.cookie-text p {
    padding-top: 20px;
    padding-bottom: 10px;
}

第二步：更新JavaScript逻辑 #

原来的show和hide函数直接修改display属性，现在改成通过添加/移除类来触发动画，同时优化cookie的设置逻辑：

(function () { 
    var warning = null, button = null, cookieName = '_seenCookiePolicy'; 

    function init() { 
        var hasSeenIt = getCookie(cookieName); 
        warning = document.getElementById('cookie-policy'); 
        button = document.getElementById('close-btn'); 

        if (hasSeenIt !== '1' && button) { 
            button.onclick = function () { 
                hide(warning, cookieName); 
            }; 
            show(warning); 
        } 
        // 如果已经同意过，直接隐藏表单不显示动画
        if (hasSeenIt === '1') { 
            warning.style.display = 'none';
        } 
    } 

    function getCookie(cname) { 
        var name = cname + "=", ca = document.cookie.split(';'); 
        for (var i = 0; i < ca.length; i++) { 
            var c = ca[i]; 
            while (c.charAt(0) === ' ') { 
                c = c.substring(1); 
            } 
            if (c.indexOf(name) === 0) { 
                return c.substring(name.length, c.length); 
            } 
        } 
        return ""; 
    } 

    function show(warning) { 
        // 先显示元素，再延迟添加active类确保动画触发
        warning.style.display = 'block';
        setTimeout(() => {
            warning.classList.add('active');
        }, 10);
    } 

    function hide(warning, cookieName) { 
        // 移除active类触发滑出动画
        warning.classList.remove('active');
        // 动画结束后再隐藏元素，时间和CSS过渡时长保持一致
        setTimeout(() => {
            warning.style.display = 'none';
            // 设置cookie，修复原代码中过期时间的毫秒数问题，添加path确保全站生效
            var days = new Date(), expires = "expires="; 
            days.setTime(days.getTime() + (24 * 60 * 60 * 1000)); 
            expires += days.toUTCString(); 
            document.cookie = cookieName + "=1; " + expires + "; path=/"; 
        }, 300);
    } 

    init(); 
})();

完整可运行代码 #

把所有代码整合在一起，你可以直接复制使用：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<style>
.cookie-warning {
    background-color: #078fa1;
    color: #ffffff;
    position: fixed;
    z-index: 10000;
    left: 0;
    bottom: 0;
    width: 100%;
    box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.39);
    transition: transform 0.3s ease-in-out;
    transform: translateY(100%);
}

.cookie-warning.active {
    transform: translateY(0);
}

.cookie-text p {
    padding-top: 20px;
    padding-bottom: 10px;
}
</style>

<div class="container">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos voluptatibus modi tempora itaque facere aliquam exercitationem </p>
</div>

<div class="cookie-warning" id="cookie-policy">
    <div class="cookie-info">
        <div class="container">
            <div class="row">
                <div class="col-lg-10">
                    <div class="cookie-text">
                        <p>We use cookies to understand how you use our site ...</p>
                    </div>
                </div>
                <div class="col-lg-2 d-flex align-items-center">
                    <button class="btn btn-warning btn-block" id="close-btn">Accept</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function () { 
    var warning = null, button = null, cookieName = '_seenCookiePolicy'; 

    function init() { 
        var hasSeenIt = getCookie(cookieName); 
        warning = document.getElementById('cookie-policy'); 
        button = document.getElementById('close-btn'); 

        if (hasSeenIt !== '1' && button) { 
            button.onclick = function () { 
                hide(warning, cookieName); 
            }; 
            show(warning); 
        } 
        if (hasSeenIt === '1') { 
            warning.style.display = 'none';
        } 
    } 

    function getCookie(cname) { 
        var name = cname + "=", ca = document.cookie.split(';'); 
        for (var i = 0; i < ca.length; i++) { 
            var c = ca[i]; 
            while (c.charAt(0) === ' ') { 
                c = c.substring(1); 
            } 
            if (c.indexOf(name) === 0) { 
                return c.substring(name.length, c.length); 
            } 
        } 
        return ""; 
    } 

    function show(warning) { 
        warning.style.display = 'block';
        setTimeout(() => {
            warning.classList.add('active');
        }, 10);
    } 

    function hide(warning, cookieName) { 
        warning.classList.remove('active');
        setTimeout(() => {
            warning.style.display = 'none';
            var days = new Date(), expires = "expires="; 
            days.setTime(days.getTime() + (24 * 60 * 60 * 1000)); 
            expires += days.toUTCString(); 
            document.cookie = cookieName + "=1; " + expires + "; path=/"; 
        }, 300);
    } 

    init(); 
})();
</script>

关键细节说明 #

• 用transform代替display控制位置，避免动画卡顿，因为transform属于CSS硬件加速属性
• 动画时长设置为0.3秒，你可以根据需求调整transition里的数值
• 修复了原代码中cookie过期时间的计算错误（少乘了1000，导致cookie秒过期），并添加path=/确保全站都能识别该cookie

内容的提问来源于stack exchange，提问作者PapT