EKCTPEMICT
@EKCTPEMICT
FrontEnd Developer

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

После добавлением через 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')
    })
  • Вопрос задан
  • 211 просмотров
Пригласить эксперта
Ответы на вопрос 1
abyrkov
@abyrkov
JavaScripter
width: 50px;
Чего вы ждете? Ах да, auto тоже не анимируется. Только с jQuery можно
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
23 нояб. 2024, в 22:38
2500 руб./за проект
23 нояб. 2024, в 22:03
3000 руб./за проект
23 нояб. 2024, в 21:53
30000 руб./за проект