Question

尝试做一个相当简单的列表动画，当鼠标悬停时会增长。

动画完成了，并且走得太远了。

也许我的填充是问题我尝试使用宽度，但我得到了类似的结果。

任何帮助将不胜感激。

<div id = "user-task-bar">

                <ol class="task-list">

                    <li> <span> My Products </span> </li>
                    <li> My Profile </li>
                    <li> Get Support </li>


                </ol>
            </div>

#user-task-bar {

position: absolute;

left:30px;
width:240px;

}

#user-task-bar ol.task-list  {

padding: 0px;
margin: 0px;
width:100%;
list-style:none;

}


#user-task-bar .task-list li {
width:100%; 
padding: 0px;
font-size: 14px;

border-top: 1px solid #000; 
border-bottom: 1px solid #000; 
border-right: 2px solid #000;

border-left: 2px solid #000;

text-align:center;
 padding: 15% 0px;
 background: #f2f3f2;
}

#user-task-bar .task-list li:hover {

 -webkit-animation: grow-right 300ms;
 animation: grow-right 300ms; 
 animation-timing-function: ease-out;

 padding: 15% 8%;
 cursor:pointer;
 background: #fff;

}

@-webkit-keyframes grow-right {

    0% { padding: 15% 0; }
    100% { padding: 15% 3px; }
}

@keyframes grow-right{

    0% { padding: 15% 0; }
    100% { padding: 15% 3px; }
}

#user-task-bar .task-list li :last {
border:  0px;
}

#user-task-bar .task-list li  span{ 

   vertical-align: middle;
}

Answer 1

动画完成后，将重新应用填充的原始值。

您可以使用animation-fill-mode: forwards来保留最后一个关键帧的属性。见https://developer.mozilla.org/fr/docs/Web/CSS/animation-fill-mode

但更简单的方法是广泛支持，即将最后一个关键帧中的属性值设置为默认值。

示例：

with animation-fill-mode：http://jsfiddle.net/cvpehzb7/5/
在最后一个关键帧和悬停规则中使用相同的填充值：http://jsfiddle.net/cvpehzb7/3/
带有CSS转换：http://jsfiddle.net/cvpehzb7/10/

Answer 2

如果您使用keyframes使用最终状态，则还应正确设置所需的属性。

在本节中，悬停时的填充也应该给出3px：

#user-task-bar .task-list li:hover {

  -webkit-animation: grow-right 300ms;
  animation: grow-right 300ms; 
  animation-timing-function: ease-out;

  padding: 15% 3px;
            // ^^^
  cursor:pointer;
  background: #fff;
}

jsfiddle

然后你也需要反向动画。

在这种情况下使用css transitions呢？

Answer 3

你可以试试这个：

<强> HTML

<div id = "user-task-bar">
    <ol class="task-list">
        <li> <span> My Products </span> </li>
        <li> My Profile </li>
        <li> Get Support </li>
    </ol>
</div>

<强> CSS

#user-task-bar {

position: absolute;


left:30px;
width:240px;


}

#user-task-bar ol.task-list  {

    padding: 0px;
    margin: 0px;
    width:100%;
    list-style:none;

}

#user-task-bar .task-list li {
    width:100%; 
    padding: 0px;
    font-size: 14px;

    border-top: 1px solid #000; 
    border-bottom: 1px solid #000; 
    border-right: 2px solid #000;

    border-left: 2px solid #000;

    text-align:center;
    padding: 15% 0px;
    background: #f2f3f2;
}

#user-task-bar .task-list li:hover {
    -webkit-transition: padding 1s ease-in-out;
    -moz-transition: padding 1s ease-in-out;
    -ms-transition: padding 1s ease-in-out;
    -o-transition: padding 1s ease-in-out;
    transition: padding 1s ease-out;
    padding: 15% 8%;
    cursor:pointer;
    background: #fff;
}

尝试过它并且运作顺利。

Answer 4

是的，问题在于填充。你需要使用较小的一个。

#user-task-bar .task-list li:hover {
 -webkit-animation: grow-right 300ms;
 animation: grow-right 300ms; 
 animation-timing-function: ease-out;
  padding: 15% 2%;
 cursor:pointer;
 background: #fff;

}

为什么这个动画完成了波涛汹涌？

4 个答案: