Cannot figure out how to fix this css

Question

I am new to the Angular 8 framework. I am trying to implement animation using angular animations

Here is what the code looks like:

This component is in <div class="col-md-5"></div> as a parent 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>

Here is what the output looks like:

The expected output is the animation should only work in the bot component and should not be displayed outside.

Where am I going wrong or where should I improve my code?

Answer 1

I do believe that your issue is in the way you've done a simple translateX job with the translate3d property. Your element is showing up from the far left because the syntax of transform3d(x, y, z) values and you've made it travel the whole page (100%). For a slide, I'd recommend changing to a transform: translateX(value) to use the best function for the job. As well as define the transform-origin to be aligned to the edge of your message/ bot container. @vishalbiswas also has a possible solution by using overflow: hidden on the containing element.

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

In CSS:

.bot-response {
overflow: hidden;
}