如何将幻灯片效果添加到cookie表单中？

Question

我已经为我的网站建立了这个曲奇同意书，当它第一次加载时，我想添加一个幻灯片效果，当按钮被点击并且表单消失时，我想添加一个滑动效果。如何将这种滑动效果添加到表单中？

以下是我到目前为止得到的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函数更新为

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>

​