Question

是否有办法改进自动细胞动态选框的 my current implementation 。当前行为符合要求，但并不像我预期的那样完美。

当前行为

如演示所示，将鼠标悬停在省略号的单元格上，使其成为良好的旧滚动选框。

预期行为

我试图让内包装 - span在内包裹范围的最右边部分到达td的最右边时停止滚动。

以下代码让我了解了当前的＃34;静态＆＃34;行为

100% {
    transform:translateX(-90%);
}

我使用任意90％，因为我不知道如何使用不同的单位来实现我的目标。如果您比较第一行和第三行中获得的结果，您会注意到span并未停留在其{＆＃34;旅行＆＃34;的相同部分。取决于其内容的长度（显然是因为我使用了百分比）。

我认为解决方案类似于以下JQuery脚本：

var x = $(this).parent().width() - $(this).width();
$(this).addDynamicKeyframeDefinition("100%{ transform: translateX("+x+")}");

不幸的是，addDynamicKeyframeDefinition方法并不存在。： - ）

编辑根据vals的建议

提供的演示具有固定的表大小，实际项目中的大多数表都具有动态列大小。因此，可能需要动态设置translateeX()。

Answer 1

您可以添加多个转换，它们可以具有相同的功能：

@keyframes scroll {
    0% {
        transform:translateX(0%);
    }
    100% {
        transform:translateX(10px) translateX(-100%);
    }
}

将剩余空间设置为10px

fiddle

您可以使用包装器（另一个）执行您想要的操作（将跨度转换为右边框调整到容器div边框）。

我创建了一个简单的演示，以便您可以看到该技术。

对于此HTML

<table>
    <tr>
        <td>aaaaaaaaaa</td>
        <td><div><span>aaaaaaaaaa bbbbbb ccccc dddddd</span></div></td>
        <td>aaaaaaaaaa</td>
    </tr>
    <tr>
        <td>aaaaaaaaaa</td>
        <td><div><span>aaaaaaaaaa bbbbbb ccccc dddddd  eee fff ggg hhh jjjjj j</span></div></td>
        <td>aaaaaaaaaa</td>
    </tr>
</table>

CSS

table {
    width: 356px;
    table-layout:fixed;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;    
    border:1px solid black;
    padding:5px;
    position: relative;
}

div {
    border: solid 1px red;
    width: 100%;
    transition: all 2s;
}
span {
    display: inline-block;
    background-color: rgba(160,255,200,0.4);
    transition: all 2s;
}
td:hover div {
   -webkit-transform: translateX(100%);
}
td:hover span {
    -webkit-transform: translateX(-100%);
}

第一个包装器（div）设置为100％宽度。将其翻译为100％会将其左边框设置为父级的右侧。现在，翻译范围-100％，将右边框移动到div的左边框，然后移动到td的右边框。

fiddle

div和span有彩色边框和背景，因此效果可见。

使用transform来转换节点，直到它到达父节点的位置

1 个答案: