如何在悬停后进行反向过渡

Question

根据我对CSS3过渡的理解，你必须只在基本元素中指定过渡，而不是在:hover元素中指定过渡，例如Mozilla文档中所描述的。当: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，当您"取消悬停"时，动画从实体变为默认值:none。边框样式是不可动画的，所以变化是突然的。

你需要在初始状态下指定相同的border-style (注意:指定一个0 border-width也可以删除默认的边框宽度)，这样动画只影响边框宽度并在两个方向上保持平滑。

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;
}