隱藏/顯示div時滑動動畫

Question

我有兩個div，頂部和底部。 兩個div都有動態高度，頂部div將根據變量顯示或隱藏。

我想在顯示或隱藏時向頂部div添加一個滑動動畫，但是底部div應該與頂部div保持一致並隨之滑動。

 var hide = true; var trigger = document.getElementById("trigger"); var topdiv = document.getElementById("topdiv"); trigger.addEventListener('click', function() { if (hide) { topdiv.classList.add('hide'); } else { topdiv.classList.remove('hide'); } hide = !hide; });

 div { position: relative; display: block; width: 100%; padding: 10px; } .top { background: #999; } .body { background: #555; } .hide { display: none !important; }

 <div id="topdiv" class="top hide"> <p>Top</p> </div> <div class="body"> <p>Body</p> <button id="trigger"> Trigger </button> </div>

我嘗試添加變換動畫，但效果僅應用於頂部div，而底部div仍然沒有動畫。

@keyframes topDivAnimate {
    from {
        transform: translateY(-100%);
    }

    to {
        transform:translateY(0%);
    }
}

非常感謝幫助。

Answer 1

你看起來像這樣嗎？ 那請試試這個：

 var trigger = document.getElementById("trigger"); var topdiv = document.getElementById("topdiv"); trigger.addEventListener('click', function() { if ($('#topdiv').css('display') == 'none') { $(topdiv).slideDown(); } else { $(topdiv).slideUp(); } });

 div { position: relative; display: block; width: 100%; padding: 10px; } .top { display: none; background: #999; } .body { background: #555; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="topdiv" class="top hide"> <p>Top</p> </div> <div class="body"> <p>Body</p> <button id="trigger"> Trigger </button> </div>

Answer 2

我會使用CSS過渡而不是動畫。 我發現最簡單的做法是通過設置下部div而不是上部div，並改變它的位置，使其覆蓋頂部（或者當然不是）。 請參閱下面的演示，我盡可能地對CSS和JS做了最小的改動：

 var cover = true; var trigger = document.getElementById("trigger"); var bottomdiv = document.getElementsByClassName("body")[0]; trigger.addEventListener('click', function() { if (cover) { bottomdiv.classList.add('cover'); } else { bottomdiv.classList.remove('cover'); } cover = !cover; });

 div { position: relative; display: block; width: 100%; padding: 10px; } .top { background: #999; } .body { background: #555; transform: translateY(0%); transition: transform 0.5s; } .cover { transform: translateY(-100%); }

 <div id="topdiv" class="top hide"> <p>Top</p> </div> <div class="body"> <p>Body</p> <button id="trigger"> Trigger </button> </div>

Answer 3

試試這段代碼，看看這是否是您想要的效果。 它使用Animate.css庫，因此您需要在<head></head>鏈接它

function animateCSS(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd)
}

var hide = false;
var trigger = document.getElementById("trigger");
var topdiv = document.getElementById("topdiv");

trigger.addEventListener('click', function() {
    if (!hide) {
    topdiv.classList.remove('hide');
    animateCSS('.body', 'slideInDown');
    animateCSS('#topdiv', 'slideInDown');
  } else {
    animateCSS('#topdiv', 'slideOutUp', function() {
      topdiv.classList.add('hide');
    })
    animateCSS('.body', 'slideOutUp');
  }
  hide = !hide;
});

工作Codepen演示我的解決方案

以下是有關如何使用Animate.css庫的更多解釋。

隱藏/顯示div時滑動動畫

問題描述

3 個解決方案

解決方案1
1 2019-04-23 12:04:34

解決方案2
0 已采納 2019-04-23 12:07:02

解決方案3
0 2019-04-23 12:37:35

隱藏/顯示div時滑動動畫

問題描述

3 個解決方案

解決方案1 1 2019-04-23 12:04:34

解決方案2 0 已采納 2019-04-23 12:07:02

解決方案3 0 2019-04-23 12:37:35

解決方案1
1 2019-04-23 12:04:34

解決方案2
0 已采納 2019-04-23 12:07:02

解決方案3
0 2019-04-23 12:37:35