无法弄清楚如何修复此CSS

Question

我是Angular 8框架的新手。我正在尝试使用角度动画来实现动画

这是代码的样子：

此组件在<div class="col-md-5"></div>中作为父分区。

component.ts：

@Component({
  selector: 'app-agent-bot',
  templateUrl: './agent-bot.component.html',
  styleUrls: ['./agent-bot.component.css'],
  animations: [
    trigger('bot_res_slide', [
      transition('* => *', [
        animate('2s', keyframes([
          style({ transform: 'translate3d(-100%, 0, 0)', visibility: 'visible' }),
          style({ transform: 'translate3d(0, 0, 0)' })
        ]))
      ])
    ])
  ]
})

component.html

<main>
  <div class="bot shadow-sm" [ngStyle]="{height: botHeight}">
    <div class="bot_header p-2 rounded-top">
      <div class="row">
        <div class="col-md-12">
          <div class="color_blue">
            <i class="fa fa-bandcamp" aria-hidden="true"></i>
            <span class="ml-3">AGENT BOT</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bot_body rounded-bottom d-flex flex-column">
      <div class="p-2">

        <div class="bot_response" @bot_res_slide>
          <div class="bot_response_msg">
            Hello Agent! How may I help?
          </div>
          <div class="bot_response_msg_time">03:00pm</div>
        </div>

        <div class="user_response">
          <div class="user_response_msg">
            Hi..!
          </div>
          <div class="user_response_msg_time">03:01pm</div>
        </div>

      </div>
      <div class="mt-auto d-flex border-top input_section">
        <div class="canned_msg">
          <img src="./../../../assets/icons/canned_icon.png" class="w-100 h-100">
        </div>
        <div class="h-100 w-100 border-left">
          <input type="text" class="user_input" placeholder="Type here" />
        </div>
        <div class="send_msg_btn d-flex justify-content-center align-items-center px-3">
          <i class="fa fa-paper-plane my-auto" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>
</main>

这是输出的样子：

预期的输出是动画应仅在机器人组件中起作用，并且不应在外部显示。

我在哪里出错或应该在哪里改进我的代码？

Answer 1

将overflow: hidden添加到消息列表容器（.bot_body）。这会将呈现在容器外部的子元素剪裁]

Answer 2

[我确实相信您的问题在于您使用translateX属性完成了简单的translate3d工作。您的元素从最左边显示，因为transform3d(x, y, z)值的语法已使它遍历整个页面（100％）。对于幻灯片，建议将其更改为transform: translateX(value)以使用最佳功能。以及将transform-origin定义为与邮件/机器人容器的边缘对齐。通过在包含元素上使用overflow: hidden，@ vishalbiswas也可以解决。