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?

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!

Answers 1

  • 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.


Related Articles