Как анимировать блок (transition не работает) после .append()?

Question

[Борис Манжела]

После добавлением через js в блок данных не работает transition: all 1s linear;. Как заставить плавно менять высоту/ширину при изменении контента?

Спасибо.

Ситуация на JFIDDLE

.box {
        transition: all 1s linear;
        padding: 10px;
        margin: 10px;
        background: #fc0;
        width: 50px;
    }

<button id="text">Add text</button>

<button id="width">More width!</button>

<div class="box">
    Text
</div>

$('#text').click(function () {
        $(".box").append('Lorem ipsum dolor sit amet, consectetur adipisicing elit. A at natus necessitatibus neque totam? Accusamus culpa')
    });

    $('#width').click(function () {
        $(".box").css('width','100px')
    })

Answer 1

[Dark Hole]

width: 50px;
Чего вы ждете? Ах да, auto тоже не анимируется. Только с jQuery можно

Comments

[Борис Манжела]

Обновил код + добавил ссылку на jfiddle. К сожалению анимация работает если задать ширины, а не изменять контент внутри.

[Dark Hole]

Борис Манжела: height: auto. В этом и прикол....