Question

我正在尝试开发一种功能，其中在表的边缘只能看到最右边的10或15px的按钮/链接，以指示为该行设置了哪种状态。如果用户悬停部分隐藏元素的边缘，则元素将滑入视图，以便用户可以看到状态文本。我一直在尝试这个并创造了一个小提琴，但无法让动画以所需的持续时间触发，并且放宽它只是现在改变位置并且不能顺利进行。有什么指针吗？

这里是小提琴链接，下面是一些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，这是您随后更改的属性。

NB。您还可以在opacity上添加转换，但无法设置任何值，但不确定是否存在此值。

css3过渡，无法让它发挥作用

1 个答案:

Demo Fiddle