CSS 3转换不适用于
我已经为我的网站构建了这个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>感谢任何帮助，谢谢
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函数更新为来触发这些样式
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>