make a div appear smoothly

you cannot mix the style display with transition! And at the same time you have to hide the ChatBubble div at all, so opacity alone isn’t enough because you still can click on the div (if there’s a content in in, like a button, action will be taken if you clicked on it!), so we have to add visibility style to make sure it’s 100% hidden.
A function that gives us an alert when we click in the ChatBubble div is added to the code for testing.

document.getElementById("feedback_button").onclick = () => {
    document.getElementById("chat_bubble").classList.toggle("displayNone");
      if ($('#button_icon').hasClass("fa-envelope")) {
      $('#button_icon').addClass('fa-close');
      $('#button_icon').removeClass('fa-envelope');
    } 
    else {
      $('#button_icon').removeClass('fa-close');
      $('#button_icon').addClass('fa-envelope');
    }
  }
  
  document.getElementById("chat_bubble").onclick = () => {
console.log("Clicked on ChatBubble div"); 
  }
  
.ChatBubble {
    background-color:red;
    height: 300px;
    display: block;
    /* opacity: 0; */
    visibility: visible;
    transition: all 0.3s;
    opacity: 1;
  }
  
  .feedbackButton {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1;
    font-size: 26px !important;
    color: black !important;
    text-align: center;
    width: 54px;
    height: 54px;
    -webkit-border-radius: 27px;
    -moz-border-radius: 27px;
    border-radius: 28px; 
    background-color:#424240;
    cursor: pointer;
    display: block;
  }
  
  .buttonIcon {
    color: white;
    padding-top: 13px;
    transition-timing-function: ease-in-out ;
  }
  
  .displayNone {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <div id="chat_bubble" class="ChatBubble displayNone">Hello</div>
        <a id="feedback_button" class="feedbackButton"><i id="button_icon" class="buttonIcon fa fa-envelope"></i></a>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top