CODEWITHSUNDEEP
javascripthtmlcss
jscripten
jscripten

Reputation: 11

Sliding animation when hiding/showing a div

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.

Upvotes: 3

Views: 8061

Answers (3)

ondrejm
ondrejm

Reputation: 164

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.

Upvotes: 0

Robin Zigmond
Robin Zigmond

Reputation: 18249

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>

Upvotes: 3

Joykal Infotech
Joykal Infotech

Reputation: 1876

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>

Upvotes: 3

Related Questions