Make a div appear smoothly

Question

I made a chat bubble where the user clicks on the bubble, a message will appear. The codes I used are as the following:

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');
  }
}

.ChatBubble {
  background-color:red;
  height: 300px;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out ;
}

.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;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out ;
}

.buttonIcon {
  color: white;
  padding-top: 13px;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out ;
}

.displayNone {
  display: none;
}

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

I am trying to add an animation such that the red "hello" message appears and disappears smoothly (with a transition of 0.5s) when the bubble is clicked. I am also trying to add the same smooth transition when the chat bubble switches from the envelope icon to the x icon.

I tried with transition-duration: 0.5s; transition-timing-function: ease-in-out ; I have also tried `transition: 0.5s' They seem to not help at all. Any suggestions?

Answer 1

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>

Answer 2

You can't use transition on display: none attribute, it can be done by changing opacity property.

This reference will explain more about that.

document.getElementById("feedback_button").onclick = () => {
  document.getElementById("chat_bubble").classList.toggle("displayNone");
  setTimeout(() => {
    $("#chat_bubble").css("display", $("#chat_bubble").hasClass("displayNone") ? "none" : "block");
  }, 500);
  
  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');
  }
}

.ChatBubble {
  background-color:red;
  height: 300px;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out ;
}

.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;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out ;
}

.buttonIcon {
  color: white;
  padding-top: 13px;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out ;
}

.displayNone {
  opacity: 0;
}

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

Answer 3

Instead of making the display: none , you can make it opacity: 0 and change it to opacity: 1 and add other animatable properties the same way.