无法弄清楚如何修复这个 css答案

【问题标题】：Cannot figure out how to fix this css无法弄清楚如何修复这个 css
【发布时间】：2019-10-02 23:31:05
【问题描述】：

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

代码如下：

此组件在<div class="col-md-5"></div> 中作为父 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>

输出如下：

预期的输出是动画应该只在机器人组件中工作，不应该显示在外面。

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

【问题讨论】：

你到底在问什么，不是很清楚？
如果我们看一下问题中呈现的图像，我们可以看到聊天消息从 div 外部从左侧飞来。它不应该在聊天机器人之外可见。如果我仍然不清楚，请告诉我
我提交了关于如何用一些 css 最好地解决你的问题的最佳答案，我假设是 AngluarJS。
非常感谢。 overflow: hidden确实解决了问题
不客气

标签： html css angular angular-animations

【解决方案1】：

将overflow: hidden 添加到消息列表容器 (.bot_body)。这将剪辑在容器外渲染的子元素

【讨论】：

【解决方案2】：

我确实认为您的问题在于您使用 translate3d 属性完成简单的 translateX 工作的方式。您的元素从最左侧显示，因为 transform3d(x, y, z) 值的语法并且您已使其遍历整个页面 (100%)。对于幻灯片，我建议更改为 transform: translateX(value) 以使用最佳功能。以及将transform-origin 定义为与您的消息/机器人容器的边缘对齐。 @vishalbiswas 也有一个可能的解决方案，即在包含元素上使用 overflow: hidden。

...
style({ transform: 'translateX(-100%)', visibility: 'visible' }),
style({ transform: 'translateX(0)' })
...

在 CSS 中：

.bot-response {
overflow: hidden;
}

【讨论】：