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使其与消息/ bot容器的边缘对齐。 @vishalbiswas也可以通过在包含元素上使用overflow: hidden来解决。

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

在CSS中：

.bot-response {
overflow: hidden;
}

无法弄清楚如何解决此CSS

2 个答案: