让 div 看起来流畅

Question

我制作了一个聊天气泡，用户点击气泡，就会出现一条消息。我使用的代码如下：

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>

我正在尝试添加一个动画，当单击气泡时，红色的“hello”消息会平滑地出现和消失（过渡时间为 0.5 秒）。当聊天气泡从信封图标切换到 x 图标时，我还尝试添加相同的平滑过渡。

我试过 transition-duration: 0.5s; transition-timing-function: ease-in-out ; 我也试过`transition: 0.5s' 他们似乎根本没有帮助。有什么建议吗？

Answer 1

您不能将display 与transition 混合使用！同时您必须完全隐藏ChatBubble div，因此仅opacity 是不够的，因为您仍然可以单击该div（如果其中有内容，例如按钮，将采取行动如果你点击它！），所以我们必须添加 visibility 样式以确保它是 100% 隐藏的。
当我们在ChatBubble div 中单击时向我们发出警报的函数已添加到代码中以进行测试。

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

您可以将 opacity: 0 改为 opacity: 1 并以相同的方式添加其他动画属性，而不是创建 display: none 。

Answer 3

display: none 属性不能使用过渡，可以通过更改opacity 属性来完成。

reference 将对此进行更多解释。

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>