分类导航

程序问答发布时间：2022-06-01 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了在聊天 ui 中添加过渡动画 ? Check it in action on Code Sandbox? Check it in action on Code Sandbox，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决在聊天 ui 中添加过渡动画 ? check it in action on Code Sandbox? check it in action on Code Sandbox？

开发过程中遇到在聊天 ui 中添加过渡动画 ? check it in action on Code Sandbox? check it in action on Code Sandbox的问题如何解决？下面主要结合日常开发的经验，给出你关于在聊天 ui 中添加过渡动画 ? check it in action on Code Sandbox? check it in action on Code Sandbox的解决方法建议，希望对你解决在聊天 ui 中添加过渡动画 ? check it in action on Code Sandbox? check it in action on Code Sandbox有所启发或帮助；

我正在我的 react Js 项目中处理聊天 ui，所以现在我已经完成了基础实现，我正在努力为它添加动画。

here is my basic codesanbox repo for the same

正如你在这里看到的，只要用户在输入框中输入并按下回车，聊天就会被添加并显示在用户界面部分给用户，并且响应立即从服务器返回（目前是硬编码的）。

这里我想添加的动画是，只要用户按下“输入”键，他的聊天就会以非常流畅的方式从屏幕底部到达其实际位置（每次他发送聊天时）。一直在努力，但仍然无法实现这一目标。希望大家帮忙，谢谢:)

解决方法

1

制作关键帧动画，如下所示：

@H_675_20@@keyframes slideUp {
  from {
    transform: translateY(100vh);
  }
  to {
    transform: translateY(0);
  }
}

将动画添加到 @H_675_20@.bubbleContainer。像这样：

@H_675_20@.bubbleContainer {
  width: 80%;
  display: flex;
  padding: 10px 20px;
  animation: slideUp 0.5s ease-in-out;
}

? check it in action on Code Sandbox

2

如果你想在消息的时间上添加变化，让它看起来像一个真正的聊天，那么在添加动画到@H_675_20@.bubbleContainer的地方，分别添加到两边，像这样：

@H_675_20@.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);
  }
}