0

私は、EM で座標を指定し font-size、コンテンツをさまざまなサイズで表示するように遷移するのが便利な場所で何かをしようとしています (これは一種のブロックベースのグラフィックスです)。

問題を説明する jsfiddle を次に示します。Firefox では問題なく、IE では遷移はありません (問題ありません) が、Safari と Chrome では非常にぎくしゃくした動作をします。

http://jsfiddle.net/6pf3D/2/

html:

<div class="parent">
    <div class="child">
    </div>
</div>​

CSS:

.parent{
    -webkit-transition: all;
    -webkit-transition-duration: 10s;
    background-color: rgba(0,255,0,0.3);
    font-size:16px;
    width:16em;
    height:16em;
}
.child{
    background-color: rgba(255,0,0,0.3);
    width: 8em;
    height:8em;
}

JavaScript:

$('.parent').css('font-size', '32px');

em ベースの座標を犠牲にすることなくスムーズな移行を行う方法を知っている人はいますか?

4

1 に答える 1

0

ここで私は新しい1を作りました、それを試してみてください

デモ（2秒間隔）

デモ2（10秒間隔）

CSS

.parent{
    background-color: rgba(0,255,0,0.3);
    font-size:16px;
    width:16em;
    height:16em;
    transition: width 10s, height 10s;
    -moz-transition: width 10s, height 10s;
    -webkit-transition: width 10s, height 10s;
    -o-transition: width 10s, height 10s;
}

.child{
    background-color: rgba(255,0,0,0.3);
    width: 8em;
    height:8em;
    transition: width 10s, height 10s;
    -moz-transition: width 10s, height 10s;
    -webkit-transition: width 10s, height 10s;
    -o-transition: width 10s, height 10s;
}
于 2012-11-05T16:41:48.633 に答える