html - 无法弄清楚如何修复这个 css
问题描述
我是Angular 8 框架的新手。我正在尝试使用角度动画来实现动画
代码如下所示:
该组件<div class="col-md-5"></div>
作为父 div 存在。
组件.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)' })
]))
])
])
]
})
组件.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>
预期的输出是动画应该只在机器人组件中工作,而不应该显示在外面。
我哪里出错了,或者我应该在哪里改进我的代码?
解决方案
添加overflow: hidden
到消息列表容器 ( .bot_body
)。这将剪辑在容器外渲染的子元素
推荐阅读
- vb.net - 如何仔细检查文件夹是否为空`?
- c# - MVVM 视图切换 - 在 InitializeComponent 之后未填充新视图数据上下文
- django - 如何在多对多关系django中访问选定名称的ID
- javascript - 在同一行返回箭头函数,打字稿
- pdf - Solr 添加和更新 pdf 文件
- c++ - 覆盖派生类中的二元运算符
- mysql - 无法将 MediaWiki 从 MySQL 迁移到 PostgreSQL
- vue.js - Vuetify 数据表自定义标头在移动设备中不起作用
- azure - 根据传入请求标头将请求转发到 Azure 应用程序网关后端池
- javascript - 在 discord.js 中获取视频 url 并使用 Youtube Api 时 Promise Rejection