在 CSS3 或 JS 中使用 div 的动画对 div 内容进行动画处理

Question

jsfield: http://jsfiddle.net/kimimsc/LEjBR/

<section id="portfolioContent" class="blueTheme">
<div class="container mmContainer">
    <div class="pullLeft portfolioVignette">
        <div class="portfolioVignetteFilter">
            <p>Test1</p>
        </div>
    </div>
</div>

#portfolioContent {}
.portfolioVignette {background-color: gold; width: 500px; height: 300px; border-radius: 20px; margin: 20px;}
.portfolioVignette > .portfolioVignetteFilter {height: 300px; width:0px; border-radius: 20px; background-color: rgba(204,204,204,0.5); -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}
.portfolioVignette:hover > .portfolioVignetteFilter {height: 300px; width: 500px; border-radius: 20px; background-color: rgba(204,204,204,0.5);  -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}

首先，如果你看一下我提供的jsfiddle你会看到我做了什么。

基本上我有一个div(黄色)，我使用css3过渡来动画另一个div (0.5 alpha的灰色)的宽度变化。灰色的div在悬停时出现在黄色的div上，当悬停动作结束时就消失了。您还可以看到，总是显示一个文本元素'Test1'。

所以我想做的是，当没有悬停时，我想只有黄色元素，没有其他任何东西(所以没有文本)，而在悬停时，我想让文本与灰色元素一起出现。

我认为这不是正确的方法，但我找不到任何可以帮助我的方法。

如果我没有说清楚的话。如果有什么问题请告诉我。

谢谢大家的帮助，

Answer 1

我做了类似的事情，但解释你的问题有点不同:

.portfolioVignette p {
 width:0;
 margin-left:0;
 overflow: hidden;
 transition: width .5s ease-out;
 transition: margin-left .5s ease-out;
}
.portfolioVignette:hover p {
 width:100%;
 margin-left:90%;
}

Answer 2

应该这样做:

.portfolioVignette p {
    width: 0;
    overflow: hidden;
    transition: width 0.5s ease-out;
}
.portfolioVignette:hover p {
    width: 100%;    
}

请看这里:http://jsfiddle.net/shomz/LEjBR/6/