无法弄清楚如何解决此问题 css

Question

我是 Angular8 框架的新手。我正在尝试使用 angular 动画

来实现动画

代码如下所示：

此组件在 <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>

输出结果如下：

预期的输出是动画应该只在 bot 组件中工作，不应显示在外部。

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

Answer 1

将 overflow: hidden 添加到邮件列表容器 (.bot_body)。这将剪辑在容器外呈现的子元素

Answer 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;
}

无法弄清楚如何解决此问题 css

Cannot figure out how to fix this css

html

css

angular

angular-animations