javascript - CSS边框动画在表格内占用空间,使用绝对位置时的粗略动画
问题描述
我正在尝试使用边框制作具有动画效果的通知按钮,但动画正在影响单元格的宽度和高度:
.tooltips {
font-size: 11px;
margin-top: -17px;
}
.tooltip-notif{
animation: ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
border-radius: 49%;
}
@keyframes ripple {
0% {
border: 0 solid black;
}
100% {
border: 10px solid rgba(0, 0, 0, 0);
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<table>
<tbody>
<tr>
<td style="display: none;" class="sorting_1">55</td>
<td style="white-space: nowrap">Class F<i class="tooltips tooltip-notif fa fa-info-circle" style="" title="Click here to see some changes" data-title=""></i></td>
<td style="display: none;">2021-06-10</td>
<td style="display: none;">2021-06-21</td>
</tr>
<tr>
<td style="display: none;" class="sorting_1">56</td>
<td style="white-space: nowrap">Class C<i class="tooltips tooltip-notif fa fa-info-circle" style="" title="Click here to see some changes" data-title=""></i></td>
<td style="display: none;">2021-06-10</td>
<td style="display: none;">2021-06-21</td>
</tr>
</tbody>
</table>
我尝试了什么:
.tooltips {
font-size: 11px;
margin-top: -17px;
}
.tooltip-notif{
animation: ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
border-radius: 49%;
}
@keyframes ripple {
0% {
border: 0 solid black;
margin-top: 10px;
margin-left: 10px;
}
100% {
border: 10px solid rgba(0, 0, 0, 0);
margin-top: 0;
margin-left: 0;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<table>
<tbody>
<tr>
<td style="display: none;" class="sorting_1">55</td>
<td style="white-space: nowrap">Class F<i class="tooltips tooltip-notif fa fa-info-circle" style="" title="Click here to see some changes" data-title=""></i></td>
<td style="display: none;">2021-06-10</td>
<td style="display: none;">2021-06-21</td>
</tr>
<tr>
<td style="display: none;" class="sorting_1">56</td>
<td style="white-space: nowrap">Class C<i class="tooltips tooltip-notif fa fa-info-circle" style="" title="Click here to see some changes" data-title=""></i></td>
<td style="display: none;">2021-06-10</td>
<td style="display: none;">2021-06-21</td>
</tr>
</tbody>
</table>
从理论上讲,这段代码应该执行得很好,尽管它在动画时很粗糙。使用position: absolute
并fixed
破坏了整个通知的位置。
我尝试申请overflow:hidden
or scroll
,并没有真正完成这项工作。
PS。
这不是一个重复的问题,有很多与此相关的问题,但这些相关问题并不能解决这个问题(例如box-sizing: border-box
)。
解决方案
您正在为border
和margin
属性设置动画,这就是它扩展表格单元格的原因。
我对您的 HTML 和 CSS 进行了细微更改,以创建涟漪效果。希望它能解决您的问题。
.tooltip-notif {
position: relative;
border-radius: 49%;
}
.tooltip-notif {
height: 30px;
width: 30px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.tooltip-notif::after {
content: "";
position: absolute;
height: 50px;
width: 50px;
border-radius: 50%;
transform-origin: center;
background-color: black;
animation: ripple 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@keyframes ripple {
0% {
transform: scale(0);
opacity: 0;
}
30% {
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 0;
}
}
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.0.9/css/all.css"
integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1"
crossorigin="anonymous"
/>
<table>
<tbody>
<tr>
<td style="display: none;" class="sorting_1">55</td>
<td style="white-space: nowrap;">
Class F<span class="tooltip-notif">
<i
class="tooltips fa fa-info-circle"
title="Click here to see some changes"
data-title=""
></i>
</span>
</td>
<td style="display: none;">2021-06-10</td>
<td style="display: none;">2021-06-21</td>
</tr>
<tr>
<td style="display: none;" class="sorting_1">56</td>
<td style="white-space: nowrap;">
Class C
<span class="tooltip-notif">
<i
class="tooltips fa fa-info-circle"
title="Click here to see some changes"
data-title=""
></i>
</span>
</td>
<td style="display: none;">2021-06-10</td>
<td style="display: none;">2021-06-21</td>
</tr>
</tbody>
</table>
推荐阅读
- javascript - 在Vue中删除数组中的条目后列表未完全更新
- python - 无法按顺序读取 csv 文件
- flutter - Flutter ARB 本地化抛出“getter was called on null”错误
- r - 如何在 tsibble 中为多个系列应用 boxcox
- reactjs - 如何覆盖纱线 monorepo 中共享组件的全局 sass 变量?
- sql - Oracle Sql Query 查找具有属性值但同时没有差异值的 id
- r - 如何将此表变成数据框?我正在使用 R。试图为它获取 ANOVA 表
- ios - 来自用户的电子邮件
- java - 我无法让 Java .Replace 对象根据扫描仪输入更改我的字符串
- c# - 将字符串中的数字替换为数字+“f”