如何使HTML中的框过渡更平滑？

Question

I've been trying to find some information about this, but I cant find some good information.
I want to make a div, that says "Contact Us" and when you click on the div, a layer shows up smoothy with input types.

I know that I can make some quick javascript to change from display:none to display:block, but how can I do it smooth?

for an example (just a quick example, the actual one will be better)

<div id="contact-us" onClick="showContactUs()">
<div id="contact-us-content" style="display: block;">
  Name - <input type="text" name="name">
  Email- <input type="text" name="email">
</div>
</div>

And then javascript is

function showContactUs(){
   var r = document.getElementById("contact-us-content");
   r.style.display = "block";
}

If any of you have any tips, or a link I can check I would appreciate it. I am not that good with jquery, but can absolutely try some if you think its better.

Answer 1

There is no way to make the appearing smooth by setting display: block . You can, however, transition opacity . I suggest adding a class by javascript and solving the rest by css.

Check it out here: https://jsfiddle.net/3wLrfk3d/

$(document).on('click', '#contact-us', show_contact_form)

function show_contact_form () {
    $('#contact-us-content').addClass('shown')
}

css:

#contact-us-content {
    opacity: 0;
    transition: opacity .5s ease;

    &.shown {
        opacity: 1;
    }
}

My example uses jquery and sass, I am sure you will be able to rewrite it to vanilla and css.

Answer 2

I usually transition the opacity, but that will mean the element will be there even if it's invisible, taking up space and blocking mouse events. I solve this by having two classes, one to fade the element and one to hide it completely when it's done fading out:

 $(function() { var $box = $('.box'); $('.toggle').on('click', function() { if (!($box).hasClass('visible')) { $box.addClass('transitioning'); setTimeout(function() { $box.addClass('visible'); }, 1) } else { $box.removeClass('visible'); setTimeout(function() { $box.removeClass('transitioning'); }, 400) } }) }) 

 body { font-family: Helvetica, Arial, sans-serif; } .box { background-color: #333; color: white; border: 5px solid white; padding: 50px 10px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4); text-align: center; transition: opacity .4s ease-in-out; display: none; opacity: 0; } .transitioning { display: block; } .visible { opacity: 1; } .toggle { margin-bottom: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="toggle">Toggle Box</button> <div class="box"> <h1>Hi there</h1> </div> 

Note: this is a quick and dirty example, it kinda freaks out if you spam clicks on the toggle button, I'll leave that up to you.