CSS 过渡幻灯片向右

Question

>我需要在此代码中添加一个 CSS 过渡，以使按钮的宽度在悬停时平滑变化，但我无法使其工作。

http://jsfiddle.net/AlexeyKosov/fa9c6nfc/1/

.HTML：

<button class="btn btn-default">
    <span class="fa fa-check"></span>
    <span class="caption">Button text</span>
</button>

.CSS：

.btn .caption {
    display: none;
}
.btn:hover .caption {
    display: inline;
}

Answer 1

你应该为此使用 max-width。

.btn .caption {
    max-width: 0px;
    display: inline-block;
    overflow: hidden;
    transition: all 2s linear;
}
.btn:hover .caption {
    max-width: 999px;
}

http://jsfiddle.net/fa9c6nfc/2/