CSS 过渡 - 只在一个方向上工作，需要两者兼而有之

Question

我有一个 CSS 过渡，它发生在链接悬停时 - 过渡发生在此链接的某些内容上。

我的问题是，当悬停在链接上时，过渡（主要为宽度和高度属性设置动画）工作正常，但在停止悬停时，元素只是弹回其未悬停状态 - 而不是过渡。

定义的样式是这样的：

a.transition {
    display: block;
    width: 300px;
    height: 200px;
    position: relative;
    border: 1px solid #000;
    color: #000'
}
a.transition .category_info_container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 70px;
    transition: height 0.5s, width 0.5s, color 0.5s;
}
a.transition .category_info_container .category_info {
    background-color: #aaa;
    padding: 0 20px;
}
a.transition .category_info_container .category_info .category_name {
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 70px;
}
a.transition .category_info_container .category_info .category_desc {
    display: none;
}
a.transition:hover .category_info_container  {
    background: #eee;
    width: 48%;
    height: 100%;
}
a.transition:hover .category_info_container .category_info  {
    position: absolute;
    bottom: 20%;
    background: none;
}
a.transition:hover .category_info_container .category_info .category_name {
    color: #000;
    line-height: 50px;
}
    a.transition:hover .category_info_container .category_info .category_desc {
    display: block;
}

还有我的标记：

<a href="#" class="transition">
<div class="category_info_container">
    <div class="category_info">
        <div class="category_name">
            Test Name
        </div>
        <div class="category_desc">
            Lorem ipsum dolar sit amet...
        </div>
    </div>
</div>
</a>

我创建了一个JSFiddle with my code。

Answer 1

我认为，如果你对元素使用不同的块会更好：

查看我的示例：
http://jsfiddle.net/bo5o3q18/3/

<a href="#" class="transition">
    <div class="category_info">
        <div class="category_name">
            Test Name
        </div>
    </div>

    <div class="category_info-add">
        <div class="category_name">
            Test Name
        </div>
        <div class="category_desc">
            Lorem ipsum dolar sit amet...
        </div>
    </div>
</a>