jquery - 使用 transform 平移节点，直到它到达其父节点的位置

Question

有没有办法改善 my current implementation 的自动单元格动态选取框。当前的行为符合要求，但不如我预期的那么完美。

当前行为

如演示中所示，将鼠标悬停在椭圆单元格上，使其变成一个不错的旧式滚动选框。

预期行为

当 inner-wrapped-span 的最右边部分到达 td 的最右边部分时，我试图让我的 inner-wrapper-span 停止滚动。

下面的代码让我了解了当前的“静态”行为

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

我随意使用 90%，因为我不知道如何使用不同的单位来实现我的目标。如果比较第一行和第三行中获得的结果，您会注意到 span 不会根据其内容的长度停在其“行程”的相同部分(显然是因为我使用百分比)。

我认为解决方案类似于以下 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 具有彩色边框和背景，因此效果可见。