如何制作浮动网站聊天按钮翻译答案

【问题标题】：How to make a Floating website chat button translation如何制作浮动网站聊天按钮翻译
【发布时间】：2020-03-08 08:01:36
【问题描述】：

美好的一天！我正在尝试复制浮动网站聊天按钮的样式，当用户单击大按钮时，该按钮将消失，它会显示一些输入转换为类似这样的聊天框https://codepen.io/neilkalman/pen/VPJpaW

这是https://jsfiddle.net/Lkagowe7/ 的小提琴，到目前为止我已经尝试过。我还希望它在底部旋转，所以我使用了另一个线程。

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
        <title>Web Chat Widget v4</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div style="display: none" class="form-box " id="myDIV">
            <h2 class="login-header"><i class="far fa-comment-dots icon"></i>We'll text you.</h2>
            <div class="test">
                <form class="formInput">
                    <div>
                        <input type="text" required id="test">
                        <label class="inputLabel">Name</label>
                    </div>

                    <div>
                        <input type="text" id="numberText" required>
                        <label class="inputLabel">Mobile No.</label>
                    </div>
                    <div>
                        <input type="text"  required>
                        <label class="inputLabel">Message</label>
                    </div>
                    <div>
                        <input type="file" id="inputFile" required><label id="labelFile" for="inputFile">
                    <i class="far fa-file-image" id="iconPhoto"></i>Choose a Photo</label>
                </div>
            </div>
            <p id="legal">By submitting you agree to receive text messages
            at the number provided. Message/data rates apply</p>
            <input type="submit" value="Send" id="submitButt" class="active">
        </form>
        <div class="footer"></div>
        </div>
        <div class="button">
            <div class="icons">
                <button class="floating-btn" onclick="myFunction()">
                    <i class="fas fa-plus"></i>
                </button>
            </div>
        </div>
        <script src="jquery.min.js"></script>
        <script>
        $('#submitButt').click(function() {
            $(this).toggleClass('active');
        });
        $(function() {
            $("#test").focus();
        });
        document.querySelector('.floating-btn').addEventListener('click', function(e) {
            e.target.closest('button').classList.toggle('clicked');
        });

        function myFunction() {
          var x = document.getElementById("myDIV");
          if (x.style.display === "block") {
            x.style.display = "none";
          } else {
            x.style.display = "block";
            document.getElementById("test").focus();

          }
        }
        </script>
    </body>
</html>

CSS

body {
  padding: 0;
  margin: 0;
  font-family: Graphik,avenir next,avenir,Helvetica,sans-serif;
  background-color: white;
}

input[type="file"]{
  display: none;
}

.floating-btn {
  width: 50px;
  height: 50px;
  background: #f5af09;
  text-decoration: none;
  border-radius: 50%;
  color: #ffffff;
  font-size: 40px;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 20px;
  bottom: 20px;
  transition: background-color 0.25s ease-out, box-shadow 0.25s ease-out;
  border: none;
  cursor: pointer;
  outline: none;
}
.floating-btn:hover {
  box-shadow: 0 4px 5px -2px rgba(0,0,0,.2), 0 7px 10px 1px rgba(0,0,0,.14), 0 2px 16px 1px rgba(0,0,0,.12);
}


.floating-btn.clicked {
  background-color: #4169cc;
}

.floating-btn i {
  transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
}

.floating-btn.clicked i {
  transform: rotate(315deg);
}

#labelFile{
  color: white;
  height: 30px;
  width: 125px;
  background-color: #f5af09;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
}

#legal{
  margin: 16px auto;
  text-align: center;
  color: #ccc;
  font-size: 10px;
  max-width: 25em;
  line-height: 1.0;
  letter-spacing: .2px;
}

#inputFile{
  border: 0 !important;
  margin-bottom: 10px;
}

.icon{
  margin-right: 8px;
  opacity: 0.5;
  font-size: 21px;
}

#iconPhoto{
  margin-right: 8px;
  opacity: 0.7;
  font-size: 18px;
}

.form-box {
  margin: 16px auto;
  font-size: 16px;
  border-radius: 9px;
  position: absolute;
  top: 47%;
  left: 85%;
  transform: translate(-50%,-50%);
  width: 340px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  box-sizing: border-box;
  background-color: #f5f5f7;
}

.test{
  background-color: #fff;
  padding-top: 25px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 27px;
  margin-left: 37px;
  margin-right: 37px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 20px;

}

.login-header {
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  background: #4169cc;
  padding: 23px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}

.form-box input{
  padding: 10px 0;
  margin-bottom: 30px;

}
.form-box textarea{
  height: 80px;
  padding: 10px 0;
  margin-bottom: 20px;
}

.form-box input,.form-box textarea{
  width: 100%;
  box-shadow: none;
  outline: none;
  box-sizing: border-box;
  border: none;
  cursor: text;
  border-bottom: 1px solid #dcdcdc;
  transition: .3s width ease-in-out;
  margin: none;

}

.form-box input[type="submit"]{
  border-bottom: none;
  cursor: pointer;
  background: #4169cc;
  color: #fff;
  margin-bottom: 0;
}
.form-box form div{
  position: relative;
}

#submitButt{
  width: 30%;
  margin-left: 121px;
  padding-top: 14px;
  padding-bottom: 14px;
  font-weight: bold;
  border-radius: 5px;
  margin-bottom: 15px;
  opacity: 10;
}

.active{
  opacity: 0.7 !important;
}

.form-box form div .inputLabel{
  position: absolute;
  left: -1px;
  top: 8px;
  pointer-events: none;
  color: #999;
  transition: .2s ease-in-out;
  font-size: 14px;
}

.form-box input:focus ~ .inputLabel,
.form-box textarea:focus ~ .inputLabel,
.form-box input:valid ~ .inputLabel,
.form-box textarea:valid ~ .inputLabel{
  top: -12px;
  left: 0;
  color: #4169cc;
  font-size: 10px;
  font-weight: bold;
  transition: .2s ease-in-out;
}

.form-box input:focus,
.form-box textarea:focus,
.form-box textarea:valid,
.form-box input:valid{
  width: 100%;
  border-bottom: 2px solid rgb(76, 118, 224);
}

.footer{
  margin-bottom: 0;
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  background: #fff;
  margin-bottom: 0px;
  border-radius: 0 0 6px 6px;
}

【问题讨论】：

听起来不错。所有这些代码的作用是什么，你要求什么？
嘿 Nico，我想让按钮像这样翻译 codepen.io/neilkalman/pen/VPJpaW ，即当用户单击按钮时它会消失并显示输入..
请帮我@NicoHaase...

标签： jquery html css css-transitions css-animations

【解决方案1】：

这是one 的做法。我已经修改了您的小提琴以使其正常工作。它与示例不完全一样，但它确实展示了如何为聊天框设置动画。

如果您使用display css 属性来隐藏和显示，您将无法真正为事物设置动画。所以你需要使用诸如不透明度和高度和宽度之类的东西来缩小、隐藏和显示。

.form-box {
  margin: 16px auto;
  font-size: 16px;
  border-radius: 9px;
  position: fixed;
  opacity: 0;
  overflow: hidden;
  bottom: 0;
  right: 10px;
  transform: translate(-50%,-50%);
  width: 30px;
  height: 30px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  box-sizing: border-box;
  background-color: #f5f5f7;
  transition: all .25s ease-in-out;
}

.form-box.open {
  transform: translate(10px, -70px);
  height: 490px;
  width: 366px;
  opacity: 1;
}

如果您不使用样式来隐藏和显示，则需要应用一个类，所以这是我对您的 myFunction 函数所做的更改以使其正常工作：

if (x.classList.contains('open')) {
  x.classList.remove("open");
 } else {
  x.classList.add("open");
  document.getElementById("test").focus();
}

【讨论】：

感谢您的帮助先生 :) 非常感谢