javascript - アニメーション中に CSS 疑似要素が消えるのを防ぐにはどうすればよいですか?

Question

これが私の（単純化された）状況です：

http://jsfiddle.net/qFhaq/

ボタンをクリックすると、div の高さを拡大するアニメーションが起動します。div が展開されている間、:after疑似要素 (「look」というテキストを含む) が消え、アニメーションの最後に再び表示されます。

疑似要素が消えないようにして、アニメーション全体で見えるようにする方法はありますか?

Answer 1

#main に「overflow」CSS ルールを追加し、「visible !important;」に設定します。

#main{
    width: 200px;
    height: 200px;
    background-color: #eee;
    border: 1px solid black;
    overflow:visible !important;
}

Answer 2

CSS3トランジションを使用するように書き直しました：

JS (速くするには、より良い場合はバニラ js に変更できます):

$(function(){
    $("#clicky").click(function(){
        $("#main").addClass('animate');
    });
});

CSS:

#main{
    width: 200px;
    height: 200px;
    background-color: #eee;
    border: 1px solid black;
    -webkit-transition: height 2s linear;
}

#main:after{
    content: "look";
    height: 50px;
    background-color: white;
    margin-left: 210px;
    border: 1px solid black;
}

#main.animate{
    height: 500px;
}

http://jsfiddle.net/qFhaq/1/