CSS-трюки: динамическая анимация перехода высоты

внешний интерфейс CSS
CSS-трюки: динамическая анимация перехода высоты

Этот вопрос возник из сообщения на Nuggets, Друг спросил, почему анимация перехода высоты в моем коде ниже не работает?

Псевдокод выглядит так:

{
    height: unset;
    transition: all 0.3s linear;
    will-change: height;

    &.up {
        height: 0;
    }
    &.down {
        height: unset;
    }
}

Это сводилось к реальной демонстрации, эффект чего-то вроде этого (думаю, суть идеи в том, чтобы переключить его на элементы.up,.downclass, пусть реализует анимацию раскрытия и закрытия):

Ага? Странно, очевидноheightсвойство установленоtransitionа почему анимация перехода не срабатывает, а разворачивается сразу в один шаг?

Ожидаемый нами эффект таков:

переход не поддерживает высоту: авто

Когда приведенный выше код установлен наheight: unsetна самом деле эквивалентно настройкеheight: auto, идея состоит в том, чтобы надеяться, что этот код сможет поддерживать динамическую высоту текста в контейнере. Каждый раз, когда он расширяется, переход расширяется до высоты самого контейнера.

Глядя на спецификацию, причина в том, чтоПереходы CSS не поддерживают изменение высоты элемента с автоматическим.

Если вышеheight: unsetЗамените его на определенное значение высоты, и анимация вступит в силу, например:

{
    &.up {
        height: 0;
    }
    &.down {
      - height: unset;
      + height: 500px;
    }
}

Однако мы также надеемся, что сможем добиться динамического перехода высоты, не так ли?

Используйте умелоmax-heightАдаптироваться к динамической высоте

Эй, вот очень интересный маленький трюк. Так как не поддерживаетheight: auto, то мы находим другой способ использоватьmax-heightфункция для достижения динамического масштабирования высоты.

Давайте изменим приведенный выше код наheight: 0заменитьmax-height: 0,Будуheight: autoзаменитьmax-height: 1000px, псевдокод, вероятно, означает следующее:

{
    max-height: 0;
    transition: max-height 0.3s linear;

    &.up {
        max-height: 0;
    }
    &.down {
        max-height: 1000px;
    }
}

Давайте оценим максимальную высоту фактического контейнера, здесь1000pxПросто нужно быть выше максимальной высоты.Но вы не можете установить его слишком высоко здесь, самое высокое близко к максимальной высоте использования., мы поговорим о том, почему позже.

из-заmax-heightПросто ограничьте максимальную высоту текста, когда фактическая высота контейнера не достигает максимальной высоты ограничения, он не будет продолжать расти, посмотрите эффект:

CodePen Demo -- the height property transition unwork

небольшой дефект

Общий эффект по-прежнему очень приятный, конечно, могут быть два небольших дефекта,

  1. Если в реальной сценеmax-heightЕго нужно использовать и он имеет другие функции, тогда этот метод может не соответствовать потребностям.
  2. Еще один минус — есть визуальная задержка, и чем больше разница с реальной высотой, тем она заметнее. То есть, если фактическая высота контейнера составляет всего 200 пикселей,max-heightсоставляет 1000 пикселей, время анимации — 1 с, а функция плавности линейна. Фактическое время перехода анимации от 0 до 200 пикселей по высоте составляет всего 0,2 с, что требует большого внимания~

Поскольку исходная анимация расширения должна растягивать контейнер по высоте до 1000 пикселей за 1 с, на самом деле она останавливается на 200 пикселях, поэтому время анимации составляет всего 0,2 секунды. Таким образом, метод является хорошим методом, но при его использовании требуется специальный анализ.

наконец

Ну и небольшая подробность, надеюсь она будет вам полезна, на этом статья подходит к концу, надеюсь она вам поможет :), если хотите получить самую интересную информацию по CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

Категории