Question

根据我对CSS3过渡的理解，您必须仅在基本元素中指定过渡，而不是在:hover元素中指定过渡，例如如Mozilla documentation中所述。当应用:hover的新属性时，这会导致转换，并且一旦您不再悬停，就会反转转换。（代码下面的小提琴）

#test{
    position:absolute;
    height: 100px;
    width: 100px;
    background-color: #A8A8A8;

    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#test:hover{
    border-bottom: 10px solid black;
}

但这只会导致淡入。当您停止悬停时，立即删除边框。 http://jsfiddle.net/hcsamkjf/1/

有什么想法吗？

Answer 1

您还需要指定“初始状态”，否则浏览器不知道要设置动画的内容。它可以有时猜测，这就是为什么你看到它半工作（但它根本不会转换为我）。

将border-bottom:10px solid transparent或border-bottom:0 solid transparent添加到#test样式中，具体取决于您想要的效果。

Answer 2

问题是，由于您未在初始状态中指定border-style，因此当您“取消悬停”时，动画会从实体变为default value：none。边境式isn't animatable所以变化是突然的。

您需要在初始状态中指定相同的border-style（注意：同时指定0 border-width以删除默认边框宽度），以便动画仅影响边框 - 宽度并保持两个方向平滑。

<强> DEMO

CSS：

#test{
    position:absolute;
    height: 100px;
    width: 100px;
    background-color: #A8A8A8;
    border-style: solid;
    border-width:0px;

    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#test:hover{
    border-bottom: 10px solid black;
}

如何在之后进行反向转换：悬停

2 个答案: