As a beginner with the Angular 8 framework, I am exploring how to incorporate animations using angular animations.
Below is an example of what my code currently looks like:
The component's parent div is contained within
<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>
This is the resulting output: https://i.sstatic.net/aiRKy.gif
I aim for the animation only to affect the bot component without affecting elements outside it. Any suggestions on improving my code or correcting mistakes?