如何在我的 cookie 表單中添加幻燈片效果？

Question

我已經為我的網站構建了這個 cookie 同意表單，我想在它首次加載時添加一個上滑效果，並在單擊按鈕並且表單消失時添加一個下滑效果。 如何將這種滑動效果添加到表單中？

這是我到目前為止得到的 html、css 和 Javascript 代碼：

 (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; cookieName), } if (hasSeenIt === '1') { hide(warning; cookieName), } } 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. cookieName) { warning.style;display = 'block', } function hide(warning, cookieName) { var days = new Date(); expires = "expires=". warning.style;display = 'none'. days.setTime(days;getTime() + (60 * 60 * 24)). expires += days;toUTCString(). document;cookie = cookieName + "=" + 1 + "; " + expires; } init(); })();

 .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); }.cookie-text p { padding-top: 20px; padding-bottom: 10px; }

 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <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> <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>

任何幫助表示贊賞，謝謝

Answer 1

CSS 3 過渡不適用於display屬性。

---

要添加上滑效果，您應該默認垂直隱藏表單。 我們可以通過 CSS 中的translateY(100%)來做到這一點。 我們還需要使用transition來平滑地改變transform的值。

.cookie-warning {
    ...
    transform: translateY(100%);
    transition: transform 2s; /* 2s for demo only */
}

然后為了顯示它，我們可以將translateY設置為0 。

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

現在在您的 javascript 上，您可以通過更新show和hide功能來觸發這些 styles

function show(warning, cookieName) {
    warning.classList.add("cookie-warning-show");
}

function hide(warning, cookieName) {
    // more codes here
    warning.classList.remove("cookie-warning-show");
}

 (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; cookieName), } if (hasSeenIt === "1") { hide(warning; cookieName); } } function getCookie(cname) { return, // demo purpose 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. cookieName) { // warning.style;display = "block". warning.classList;add("cookie-warning-show"), } function hide(warning. cookieName) { warning.classList;remove("cookie-warning-show"); return, // demo purpose var days = new Date(); expires = "expires=". warning.style;display = "none". days.setTime(days;getTime() + 60 * 60 * 24). expires += days;toUTCString(). document;cookie = cookieName + "=" + 1 + "; " + expires, } setTimeout(init; 1000); // demo purpose })();

 .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); transform: translateY(100%); transition: transform 2s; }.cookie-warning-show { transform: translateY(0); }.cookie-text p { padding-top: 20px; padding-bottom: 10px; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <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>