Sliding animation when hiding/showing a div
Question
I have two divs, top and bottom. Both divs have dynamic height, the top div will show or hide depending on a variable.
I would like to add in a sliding animation to the top div when showing or hiding, but the bottom div should stick with the top div and slide with it too.
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>
I tried adding transform animations, but the effect is only applied to the top div while the bottom div remains unanimated.
@keyframes topDivAnimate {
from {
transform: translateY(-100%);
}
to {
transform:translateY(0%);
}
}
Help is much appreciated.
3 answers
solution1
1 2019-04-23 12:04:34
Are you looking something like this? Then please try this:
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>
solution2
0 ACCPTED 2019-04-23 12:07:02
I would use CSS transition rather than animation. I've found it easiest to do by animating the lower div rather than the upper one, and changing its position so that it covers the top one (or, of course, not). See demonstration below, I've made as minimal changes as I could to the CSS and 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>
solution3
0 2019-04-23 12:37:35
Try this code and see if that's the effect you wanted. It uses the Animate.css library so you'll need to link that in your <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;
});
Working Codepen demo of my solution
Here 's some more explanation on how to use the Animate.css library.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.