【问题标题】:css bubble chat slide up animationcss气泡聊天上滑动画
【发布时间】:2021-03-10 16:44:50
【问题描述】:

我正在尝试仅使用 CSS 创建聊天动画。到目前为止,我已经尝试创建this。我的问题是当他们不该出现时如何隐藏气泡?

@keyframes slide {
  from {bottom: -20px}
  to {bottom: 0px}
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

另外,我认为这不是创建聊天动画的最佳方法。我还没有想过当聊天越来越长时如何隐藏旧的气泡聊天。有谁知道创建此动画但仅使用 CSS 的最佳方法是什么?

【问题讨论】:

    标签: css animation css-animations


    【解决方案1】:

    关键思想是使用flex-direction: column-reverse 的弹性盒容器,因此消息始终是底部锚定的。这样做您需要以相反的顺序插入整个聊天的标记。

    容器顶部有一个::before 伪元素,以渐变作为背景,因此,当对话滚动时,消息似乎消失在顶部区域。

    消息的动画可以使用不同的animation-delay 为每条消息和animation-fill-mode: forwards 来保持最后一个关键帧的值。

    *, *::before {
      box-sizing: border-box;
    }
    
    .chat {
      display: flex;
      flex-direction: column-reverse;
      height: 12rem;
      overflow: hidden;
      border: 1px #ccc dashed;
      font: .85rem/1.5 Arial;
      color: #313131;
      position: relative;
    }
    
    .chat::before {
      content: "";
      position: absolute;
      z-index: 1;
      top: 0;
      height: 40%;
      width: 100%;
      background: linear-gradient(to bottom, white 20%, rgba(255, 255, 255, 0)) repeat-x;
    }
    
    .chat p {
      margin: 0;
      padding: 0;
    }
    
    .chat__content {
      flex: 0 1 auto;
      padding: 1rem;
      margin: 0 0.5rem;
      background: var(--bgcolor);
      border-radius: var(--radius);
    }
    
    .chat__message {
      width: 45%;
      display: flex;
      align-items: flex-end;
      transform-origin: 0 100%;
      padding-top: 0;
      transform: scale(0);
      max-height: 0;
      overflow: hidden;
      animation: message 0.15s ease-out 0s forwards;
      animation-delay: var(--delay);
      --bgcolor: #d8d8d8;
      --radius: 8px 8px 8px 0;
    }
    
    .chat__message_B {
      flex-direction: row-reverse;
      text-align: right;
      align-self: flex-end;
      transform-origin: 100% 100%;
      --bgcolor: #d2ecd4;
      --radius: 8px 8px 0 8px;
    }
    
    .chat__message::before {
      content: "";
      flex: 0 0 40px;
      aspect-ratio: 1/1;
      background: var(--bgcolor);
      border-radius: 50%;
    }
    
    @keyframes message {
      0% {
        max-height: 100vmax;
      }
      80% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
        max-height: 100vmax;
        overflow: visible;
        padding-top: 1rem;
      }
    }
    <section class="chat">
       
       <div class="chat__message chat__message_B" style="--delay: 18s;">
          <div class="chat__content">
             <p>Thank you.</p>   
          </div>
       </div>
    
       <div class="chat__message chat__message_A" style="--delay: 13s;">
          <div class="chat__content">
             <p>Mr.Doe, your current balance is $19,606.76</p>   
          </div>
       </div>
       
       <div class="chat__message chat__message_A" style="--delay: 10s;">
          <div class="chat__content">
             <p>Sure, let me check...</p>   
          </div>
       </div>   
    
       <div class="chat__message chat__message_B" style="--delay: 6s;">
          <div class="chat__content">
             <p>Hi jane, I'm John Doe. <br />
                I need to know my current account balance</p>   
          </div>
       </div>
    
       <div class="chat__message  chat__message_A" style="--delay: 1s;">
          <div class="chat__content">
             <p>Hello, my name is Jane.<br />
                How can I help you?</p>   
          </div>
       </div>
    
    
    </section>

    【讨论】:

    • 哇,非常感谢!!我感谢这个答案一千次!谢谢你的解释:)
    • 我还在codepen上做了一个小演示,消息按正确的顺序@jade
    猜你喜欢
    • 2021-05-19
    • 2021-12-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-11-01
    相关资源
    最近更新 更多