在聊天界面中添加过渡动画

Question

我在我的react项目中做了一个聊天ui，所以现在我已经完成了基本的实现，我很难给它添加一个动画。

这是我的基本密码箱回购同样的

正如您在这里看到的，一旦用户在输入框中键入并按enter键，chat就会被添加到用户ui部件中，并立即从服务器返回响应(这是硬编码的)。

我想在这里添加的动画是，一旦用户按下"enter"，他的聊天就会从屏幕底部以很好的流畅的方式从屏幕底部传到它的实际位置(每次他发送聊天)。虽然困难重重，但却无法做到这一点。希望大家帮忙，谢谢:)

Answer 1

1

1. 制作关键帧动画，如下所示： @keyframes { from { transform: translateY(100 to )；}to{ transform: translateY(0)；}}

​

1. 将动画添加到.bubbleContainer中。如下所示： .bubbleContainer {宽度: 80%；显示: flex；填充:10 in 20 in；动画: slideUp 0.5s轻松进入；}

​

在代码沙箱上检查它是否有效

​

​

2

如果您想要添加消息的时间性以使其看起来像一次真正的聊天，那么在将动画添加到.bubbleContainer的位置，将其分别添加到双方，如下所示：

.bubbleContainer {
  width: 80%;
  display: flex;
  padding: 10px 20px;
  opacity: 0;
}

.bubbleContainer.right {
  justify-content: flex-end;
  animation: slideUp 0.3s ease-in-out forwards;
}

.bubbleContainer.left {
  justify-content: flex-start;
  animation: slideUp 0.3s ease-in-out 1s forwards;
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(100vh);
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

​

在代码沙箱上检查它是否有效

​