如何使用CSS将元素从另一个元素中动画，而不必一直保持单击
如何使用CSS将元素从另一个元素中动画，而不必一直保持单击
提问于 2021-10-04 03:23:55
我有一个表，它在ReactJS中包含许多‘可点击’行。
每一行，当你悬停在它上面，将得到轻微的阴影-箭头图标将出现在一个小框，从左边淡入使用传统的CSS动画/过渡。
我想要完成的是，当你点击行的时候，出现的图标基本上会在它的路径上继续，然后淡出到右边。
下面我已经编写了代码，如果您在行中悬停后单击并保持行，您将看到箭头确实移出。但是，如果您释放单击，该功能基本上会按照:active pseudoclass的预期停止。
是否可以这样做:当您单击一行时，元素会在不依赖:active psuedo的情况下浮动？如果没有JavaScript，这有可能吗？
table {
display: table;
border-collapse: separate;
box-sizing: border-box;
text-indent: initial;
border-spacing: 2px;
border-color: grey;
width: 100%;
border: 1px solid #dee2e6;
margin-bottom: 1rem;
}
.table > thead > tr > th {
font-size: 14px;
font-weight: 700;
padding-bottom: 0;
text-transform: uppercase;
border: 0;
}
table td {
padding: 15px;
height: 20px;
}
.table.table-striped tbody tr:nth-of-type(odd) {
background-color: #f6f6f6;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.05);
}
tr.has-click-handler {
cursor: pointer;
}
tr.has-click-handler:hover td {
background-color: rgba(10, 138, 241, 0.192);
}
tr.has-click-handler td.row-click-indicator {
justify-content: center;
flex-direction: column;
position: relative;
display: flex;
align-items: flex-start;
}
tr.has-click-handler td.row-click-indicator:after {
transition: all 300ms ease-out;
font-family: Arial;
position: absolute;
right: 100px;
content: ">";
font-size: 22px;
font-weight: 900;
opacity: 0;
background-color: #004990;
color: #fff;
width: 30px;
height: 30px;
text-align: center;
border-radius: 5px;
}
tr.has-click-handler td.row-click-indicator:hover:after {
opacity: 1;
right: 10px;
}
tr.has-click-handler td.row-click-indicator:active:after {
right: -25px;
opacity: 0;
}<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="text-right pr-2">#</th>
<th>Class Name</th>
<th class="text-right">Meta Count</th>
</tr>
</thead>
<tbody>
<tr class="has-click-handler">
<td class="text-right pr-2">1.</td>
<td class="row-click-indicator">Auth Security</td>
<td align="right"><span class="badge badge-pill badge-primary">7</span></td>
</tr>
<tr class="has-click-handler">
<td class="text-right pr-2">2.</td>
<td class="row-click-indicator">Data Storage</td>
<td align="right"><span class="badge badge-pill badge-primary">5</span></td>
</tr>
<tr class="has-click-handler">
<td class="text-right pr-2">3.</td>
<td class="row-click-indicator">Data Receiving </td>
<td align="right"><span class="badge badge-pill badge-primary">5</span></td>
</tr>
<tr class="has-click-handler">
<td class="text-right pr-2">4.</td>
<td class="row-click-indicator">Data Integrity</td>
<td align="right"><span class="badge badge-pill badge-primary">3</span></td>
</tr>
<tr class="has-click-handler">
<td class="text-right pr-2">5.</td>
<td class="row-click-indicator">Vulnerabilities</td>
<td align="right"><span class="badge badge-pill badge-primary">3</span></td>
</tr>
<tr class="has-click-handler">
<td class="text-right pr-2">6.</td>
<td class="row-click-indicator">Network</td>
<td align="right"><span class="badge badge-pill badge-primary">0</span></td>
</tr>
</tbody>
</table>
更新
我应该声明，如果可能的话，我想要一个非javascript的解决方案。是否有一种方法可以使用CSS启动transition并让它继续运行，而不管元素的当前状态如何？(悬停/活动/聚焦)
回答 1
Stack Overflow用户
发布于 2021-10-04 03:35:36
Use可以使用JavaScript进行此操作。为此，可以使用JavaScript onMouseOver、onMouseDown或使用EventListeners来实现。用这个片段来更好地理解。
<!DOCTYPE html>
<html>
<body>
<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">HOVER ME</h1>
<script>
function mouseOver() {
document.getElementById("demo").style.color = "#799";
}
function mouseOut() {
document.getElementById("demo").style.color = "black";
}
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69430596
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号