Trying to have a div fade in on button press with transition time and delay, but can't animate switch between display:none and display:inline?

Question

I have a div on a website that is currently set up such that it starts at opacity:0; and transitions to opacity:1; on button press. I chose that since I found you couldn't have a switch from display:none; to display:inline; have a transition on button press. However, now when the page is viewed in smaller windows, there's a scroll bar, since the content is still there, just not view-able. What choices do I have? Can I somehow get the div to have display:none; and still fade in?

I have no knowledge of jQuery, so if that's somehow a solution to this problem could you guys spell it out very simply for me? I'll put a JSFiddle below.

JSFiddle

Thanks for any help!

I'm not sure `visibility` is what I'm looking for. This still produces a scroll bar with a smaller browser window, and it doesn't seem to be animate-able either; it doesn't wait for `animation-delay` or `transition-delay` nor does it fade in with `transition`. Thanks for the response though, @John! — Cameron, Mar 26 '16 at 02:56
@John `visibility:hidden;` still takes up space in the DOM, which would still produce a scrollbar for him — zgood, Mar 26 '16 at 02:57
yes sorry, it was the other way around. `display` will remove the item as it was no there — John, Mar 26 '16 at 03:03
Would something like [this](https://jsfiddle.net/g12g65wk/7/) work? — zgood, Mar 26 '16 at 03:17
I cannot immediately see the problem in the jsFiddle -- which DIV has the undesireable scrollbar? — cssyphus, Mar 26 '16 at 03:18
@gibberish I believe he is talking about the `#abouttextbackground` that fades in when you click the About button. The scroll bar is on the window. He really probably needs a `@media` query to reduce the size of `#abouttextbackground` and it's contents on smaller window sizes. — zgood, Mar 26 '16 at 03:21
similar question: http://stackoverflow.com/questions/1091322/how-to-fade-to-display-inline-block — gmfm, Mar 26 '16 at 03:24
@gibberish, I'm not sure how big the console on JSFiddle is for you, but the link in my OP has a scroll bar if the window is too small, even when the visibility or opacity is set to hidden/0. — Cameron, Mar 26 '16 at 03:28
@zgood, That's fantastic! That looks perfect, I'm going to try it on my original HTML right now. — Cameron, Mar 26 '16 at 03:29

score 2 · Accepted Answer · answered Mar 26 '16 at 03:36

2

A possible solution (if you don't mind a slightly different type of animation) would be to set your div to transform:scale(0); then animate both opacity and scale with a display class.

See this fiddle.

CSS

#abouttextbackground {
    ...
  opacity:0;
  transform:scale(0);
}
    #abouttextbackground.show{
      opacity:1;
      transform:scale(1);
    }

JS

var about_text = document.getElementById("abouttextbackground");                
about_text.classList.toggle('show');

If you want to keep the animation the same then @gibberish's solution would work better.

answered Mar 26 '16 at 03:36

zgood

12,181
2
25
26

Both your and @gibberish's solutions are valid and extremely helpful, but I'm choosing this one as the solution since I find this style of animation actually fits better. Thanks a bunch for the help! – Cameron Mar 26 '16 at 03:44
np glad to help. If the horizontal scroll bar becomes an issue you can add this style: `#abouttext img{ max-width: 100%; }` and add `overflow: hidden;` to your `#abouttextbackground` as demo'ed [here](https://jsfiddle.net/g12g65wk/10/) and you may want to consider some `@media` queries to reduce your heading and font sizes on smaller screens. – zgood Mar 26 '16 at 03:50
are `@media` queries something to do with jQuery? It sounds like I'll have to start learning about jQuery soon. – Cameron Mar 27 '16 at 00:41
@ThatGuy7 no is CSS. It allows you to define certain styles at certain screen sizes. So for smaller screens you can make your heading font slightly smaller so it fits in the div area better – zgood Mar 27 '16 at 19:00

score 1 · Answer 2 · answered Mar 26 '16 at 03:26

You can turn off the visibility of the vertical scrollbar for that DIV. In your jsFiddle example, I did this for the body element:

jsFiddle Demo

CSS:

body {overflow-y:hidden;}

JS:

var scrollvis = 'hidden';
function funcAbout() {
    scrollvis = (scrollvis=='hidden') ? 'auto' : 'hidden';
    $('body').css({'overflow-y':scrollvis});

Trying to have a div fade in on button press with transition time and delay, but can't animate switch between display:none and display:inline?

2 Answers2