4 使用animate完成下午的sendMess.html的消息发送，要求每个div消息从右边往左边移动最后消息

的位置在左侧，同时每个消息发送完毕后，消息框要自动清空，等待下一次输入消息。

首先，需要在 HTML 文件中添加一个消息框，用于显示发送的消息：

<div id="message-box"></div>

然后，使用 JavaScript 代码来实现消息发送的动画效果：

// 获取消息框元素
const messageBox = document.getElementById("message-box");

// 定义消息发送函数
function sendMessage() {
  // 获取用户输入的消息
  const message = document.getElementById("message-input").value;
  
  // 创建一个新的消息元素
  const newMessage = document.createElement("div");
  newMessage.innerText = message;
  newMessage.style.position = "absolute";
  newMessage.style.right = "0";
  newMessage.style.top = "0";
  messageBox.appendChild(newMessage);
  
  // 计算消息框宽度和高度
  const boxWidth = messageBox.offsetWidth;
  const boxHeight = messageBox.offsetHeight;
  
  // 计算消息元素宽度和高度
  const messageWidth = newMessage.offsetWidth;
  const messageHeight = newMessage.offsetHeight;
  
  // 定义消息元素动画的起始位置和结束位置
  const startX = boxWidth - messageWidth;
  const startY = boxHeight - messageHeight;
  const endX = -messageWidth;
  const endY = startY;
  
  // 使用 animate 函数实现消息元素动画
  newMessage.animate([
    { transform: `translate(${startX}px, ${startY}px)` },
    { transform: `translate(${endX}px, ${endY}px)` }
  ], {
    duration: 3000
  }).onfinish = () => {
    // 动画完成后，将消息元素从消息框中移除
    newMessage.remove();
  };
  
  // 清空消息输入框
  document.getElementById("message-input").value = "";
}

// 监听发送按钮的点击事件
document.getElementById("send-button").addEventListener("click", sendMessage);

这段代码中，首先获取了消息框元素和用户输入的消息，然后创建一个新的消息元素，并将其添加到消息框中。接着，计算了消息框和消息元素的宽度和高度，并定义了消息元素动画的起始位置和结束位置。最后，使用 animate 函数实现消息元素的动画，并在动画完成后将其从消息框中移除。同时，还监听了发送按钮的点击事件，在用户点击发送按钮时触发 sendMessage 函数。

这样，就可以实现每个消息从右边往左边移动，并在最后位置停留的效果了。同时，每次发送消息后，消息框会自动清空，等待下一次输入消息。