Как показать изменение высоты на динамических изображениях - отреагируйте css - PullRequest
Новая
       56

Как показать изменение высоты на динамических изображениях - отреагируйте css

0 голосов
/ 15 октября 2018

Я работаю над тем, чтобы показать несколько изображений в виде слайда.Высота изображения динамическая, а не статичная.Я просто хочу показать анимацию при переходе по высоте при переходе к следующему изображению.

это мой родительский контейнер div. 

<div style={ {height: '100%',margin: '0px',width: '100%',transition:'height 2s',}}>
    <ImageSlide
      url={this.images[currentImageIndex]}
    />
</div>

это мой компонент Image slide. 

<div style={{ position: 'relative' }}>
        <img style={width: '100%',display: 'inline-block',transition: 'height 2s',} alt=" " src={url} />
</div>

Как отобразить анимацию перехода по высоте при переходе к следующему изображению?

1 Ответ

0 голосов
/ 15 октября 2018

Решение № 1 - максимальная высота

При работе с непиксельными размерами, такими как auto или '%' и переходом, вы можете положиться на свойство max-height, чтобыполучить переход.

Отключения:

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

Solution # 2 - ScaleY

Другое решение - использовать преобразование ScaleY.Мы устанавливаем переход для свойства transform элемента, затем переключаемся между transform: scaleY (1) и transform: scaleY (0).Это означает, соответственно, «рендеринг этого элемента в том же масштабе (по оси Y), в котором он начинается» и «рендеринг этого элемента в масштабе 0 (по оси Y)».Переход между этими двумя состояниями будет аккуратно «сдавливать» элемент до его естественного, основанного на содержании размера.В качестве бонуса, даже буквы и / или изображения внутри будут визуально «сдавливать» себя, а не скользить за границей элемента.Обратная сторона?Поскольку никакое оплавление не инициируется, элементы вокруг этого элемента не будут полностью затронуты.Они не будут ни перемещаться, ни изменять размеры, чтобы заполнить пустое пространство.

Ссылка и примеры: https://css -tricks.com / using-css-transitions-auto-sizes /

...