html - css3 过渡，无法让它工作

Question

我正在尝试开发一种功能，在该功能中，在表格的边缘只能看到按钮/链接最右边的 10 或 15 像素，以指示为该行设置的状态。如果用户将鼠标悬停在部分隐藏元素的边缘，该元素将滑入 View ，以便用户可以看到状态文本。我一直在尝试这个并创建了一个 fiddle ，但无法让动画以所需的持续时间触发并放松它现在只是改变位置并且不会那么顺利。有什么指点吗？

这是 fiddle 链接，下面是一些 html 和 css

http://jsfiddle.net/UT5kf/

<table>
    <tbody>
        <tr>
            <td data-value="5 Loremifierad">
                <span class="status-strip prospect">
                    5 Loremifierad
                </span>
            </td>
            <td data-value="Pixar Inc">
                Pixar Inc
            </td>
            <td data-value="170 000">
                170 000
            </td>
            <td data-value="7%">
                7%
            </td>
            <td data-value="20%">
                <div class="progress">
                    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" class="progress-bar" role="progressbar" style="width: 20%;">
                        <span>20%</span>
                    </div>
                </div>
            </td>
            <td data-value="2014-04-22">
                2014-04-22
            </td>
            <td data-value="Jonathan Swift">
                Jonathan Swift
            </td>
        </tr>

        <tr>
            <td data-value="5 Loremifierad">
                <span class="status-strip credited">
                    5 Loremifierad
                </span>
            </td>
            <td data-value="Pixar Inc">
                Pixar Inc
            </td>
            <td data-value="170 000">
                170 000
            </td>
            <td data-value="7%">
                7%
            </td>
            <td data-value="20%">
                <div class="progress">
                    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" class="progress-bar" role="progressbar" style="width: 20%;">
                        <span>20%</span>
                    </div>
                </div>
            </td>
            <td data-value="2014-04-22">
                2014-04-22
            </td>
            <td data-value="Jonathan Swift">
                Jonathan Swift
            </td>
        </tr>
    </tbody>
</table>

<style>  .status-strip{
    transition: left 2s ease-in-out, opacity 2.2s ease-in-out;
    display:inline-block;width:100px;
    margin-left:-75px;
  }


  .status-strip {
    background: #8ec63f;
    transition-property: background;
    transition-duration: 0.5s;
    transition-timing-function: linear;
  }
  .status-strip:hover {
    background: yellow;
    margin-left:0px;}

Answer 1

将您的过渡更改为:

Demo Fiddle

transition: margin-left 0.4s ease-in-out, opacity 0.6s ease-in-out;

您当前引用的是 left 而不是 margin-left，这是您随后要更改的属性。

注意。您还在 opacity 上添加了一个过渡，但没有设置任何值，不确定这是否应该存在。