transition вместе с width auto

Question

Долго искал решение среди готовых, но то ли невнимательно искал, то ли их для моей ситуации действительно нет.

Проблема: есть карточки товаров, и в них есть кнопки внутри которой может быть как одна цена, так и новая цена с зачеркнутой старой, т.е. ширина не фиксированная и зависит от количества контента внутри. Задача: мне требуется плавно изменять ширину кнопки, но я никак не могу этого добиться, т.к. с width auto transition не работает, а фиксированную ширину я не могу задать из-за динамически меняющегося контента.

Код: https://playcode.io/1865896

Answer 1

 <div class="card">
        <div class="card__body">
          <span>
            <button>Кнопка</button>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>
          </span>
        </div>
      </div>

    .card__body {
      display: grid;
      grid-template-columns: 0fr;
      transition: grid-template-columns 0.5s;
      height: 100%;
    }

    .card__body span {
      overflow: hidden;
      white-space: nowrap;
    }

    .card__body:hover {
      display: grid;
      grid-template-columns: 1fr;
      transition: grid-template-columns 0.5s;
    }

Можно использовать display: grid; и вешать анимацию на grid-template-columns, но в этом случае обязателен какой-нибудь элемент, например span внутри card__body, а уже внутрь этого span вставлять свой контент.

БЛОГ НА HUSL

transition вместе с width auto

Ответы (1 шт):