Расширение поля css до правильной высоты текста - PullRequest
Новая
       3

Расширение поля css до правильной высоты текста

0 голосов
/ 27 января 2020

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

Вот соответствующая css: 

.collapse-card {
  border-bottom: 1px solid #eee;
  color: #777;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  background-color: rgba(241,240,240,0.5);
  border-radius: 5px;
  padding-right: 5px;
}

.collapse-card * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.collapse-card.active {
  -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.18824);
  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.18824);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.18824);
  z-index: 200;
  margin: 1rem -3rem;
}

Я создал эту скрипку, которая показывает проблему : https://jsfiddle.net/6gozpmeb/

Когда вы щелкаете по блоку, он сначала расширяется до высоты, превышающей текст на секунду, а затем изменяет размер до правильной высоты. Как я могу устранить этот эффект? Установка фиксированной высоты устраняет проблему, но размер текста является динамическим c, поэтому я не могу предсказать высоту.

Редактировать: Я хочу сохранить эффект горизонтального расширения, поэтому удаление margin: 1rem -3rem; из .collapse-card.active устраняет желаемую анимацию.

Ответы [ 3 ]

0 голосов
/ 27 января 2020

JSFiddle

удалите поле как @ Хар sh Бала сказал и добавьте его сюда:

CSS

.collapse-card {
  border-bottom: 1px solid #eee;
  color: #777;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s
  background-color: rgba(241,240,240,0.5);
  border-radius: 5px;
  padding-right: 5px;
  margin: 1rem -3rem
}
0 голосов
/ 27 января 2020

Единственная вещь, которая работала для сохранения того же эффекта анимации, без расширения, превышающего высоту текста, - это дать .collapse-card.active фиксированную ширину. Не оптимально, но гораздо лучше, чем проблема мерцания по высоте. Если у кого-то есть лучший ответ, поддерживающий ту же анимацию, пожалуйста, опубликуйте его.

0 голосов
/ 27 января 2020 
 .collapse-card.active {width: 130%;transition: .4s;margin-left: 0; }
 .collapse-card {width: 100%;margin-left: 15%;}
 /* add Above css */

проверить эту ссылку https://jsfiddle.net/2fu7r6yc/

...