3

Currently, I have a (hopefully-not-too-hackish-but-certainly-mildly-so; see below) page in which a 'see more' link "uncovers" a full-page div overlay:

https://jsfiddle.net/6241cphL/3/

I would like to incorporate some sort of CSS transitions so that the overlay(s) appear/disappear a bit more...gracefully. Is there a way to do this?

Before posting here, I'd tried a number of things:

  • I tried adding a .hidden and/or .visible class which I applied/unapplied to #container and/or #inner via Javascript (stolen from here).
  • I also tried adapting this fade-in/fade-out model + this li-menu example as well, all to no avail.

Note: As mentioned above, this thing is almost-assuredly-hackish, at least mildly so. For my needs, the general structure/functionality used here is perfectly fine, and while I do welcome general constructive feedback (everyone's goal is to get better, I think), I would prefer if such feedback also came with suggestions on how to achieve the result I'm seeking within the framework I've already implemented. :)

cstover
  • 171
  • 1
  • 9

3 Answers3

2

Instead of setting inline styles, add/remove a class name (like opened) You can then use CSS transitions/animations. Use transitionend event and similar if you want to add another class name at the end of the transition (i.e. closed) which would be useful to set some properties like display: none.

Giacomo Cosimato
  • 635
  • 5
  • 9
  • There's no need to `transitionend` and `display: none`. All OP needs if to *gracefully* (fade perhaps) in/out the overlays. (All doable with `visibility`, `transition` and `opacity`... so CSS-alone) – Roko C. Buljan Dec 23 '17 at 01:12
  • Thank you for your response, @Giacomo, and forgive me for asking but: Could you possibly show me what you mean in a Fiddle and/or expanded answer? I'm a hobbyist designer at best, and I'm not 100% sure how to combine the words you're saying with what the provided link (which I appreciate very much!) demonstrates. – cstover Dec 23 '17 at 01:38
  • @RokoC.Buljan: I assumed it was doable using CSS-alone as well. Do you have any specific suggestions I may apply to my example? – cstover Dec 23 '17 at 01:39
  • Forgive me, @GiacomoCosimato, but the Fiddle you linked doesn't seem to be any different than the one I originally linked to. – cstover Dec 24 '17 at 12:37
2

Toggle the overlay class:

var overlay = document.getElementById("overlay");

function toggleOverlay() {
  overlay.classList.toggle("active");
}
#overlay {
  position: fixed;
  left:0; top:0; bottom:0; right:0;
  background: rgba(0,0,0, 0.3);
  transition: 0.5s;
  
  opacity: 0;
  visibility: hidden;
}
#overlay.active {
  opacity: 1;
  visibility: visible;
}
<button onclick="toggleOverlay()">Show overlay</button>

<div id="overlay">
  <button onclick="toggleOverlay()">Close</button>
</div>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
0

You can do it in different ways. Another option

var right_link = document.getElementById('right_link');
var inn = document.getElementById('inner');
var link = document.getElementById('link');

function makeVisible() {
  if (inn.classList.contains('active')) {
    inn.classList.remove('active');
  } else {
    inn.classList.add('active');
  }
}
right_link.addEventListener('click', makeVisible)
#inner {
  border-radius: 100%;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  transform: translate(-50%, -50%);
  transition: all .3s;
}

#inner.active {
  background-color: #888888;
  border-radius: 100%;
  height: 300px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 300px;
  transform: translate(-50%, -50%);
  transition: all .3s;
}
<span id="right_link">Click me</span>
<div id="inner">
</div>
Air
  • 181
  • 3
  • 15