1

Привет!
Как плавно увеличивать по высоте блок:

.b-form__group--form-comment {
  border: 2px solid #000;
  padding-left: 14px;
  padding-right: 10px;
  background: #fff;
}
b-input--new-comment {
  display: block;
  width: 100%;
  resize: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  height: 56px;
  padding: 15px 10px 0 0;
  text-align: left;
  border: none;
}
.b-form__group--add-file {
  padding-bottom: 12px;
  opacity: 0;
  position: absolute;
}
.b-label--add-file {
  width: 100%;
  text-align: left;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}
.b-input--add-file[type=file] {
  display: none;
}
.b-form__group.b-form__group--form-comment:hover .b-form__group--add-file {
  opacity: 1;
  display: block;
  transition: max-height 0.25s ease-in;
  position: static;
}
<div class="b-form__group b-form__group--form-comment">
  <textarea placeholder="Type message…" class="b-input b-input--new-comment"></textarea>


  <div class="b-form__group b-form__group--add-file">
    <label for="add-file" class="b-label b-label--add-file">Add files</label>
    <input type="file" id="add-file" class="b-input b-input--add-file">
  </div>
</div>

1 ответ 1

2

Для анимации нужно задать начальное и конечное значение свойства max-height.

.b-form__group--form-comment {
  border: 2px solid #000;
  padding-left: 14px;
  padding-right: 10px;
  background: #fff;
}
.b-input--new-comment {
  display: block;
  width: 100%;
  resize: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  height: 56px;
  padding: 15px 10px 0 0;
  text-align: left;
  border: none;
}
.b-form__group--add-file {
  padding-bottom: 12px;
  opacity: 0;
  position: static;
  max-height: 0px;
  transition: 1s;
}
.b-label--add-file {
  width: 100%;
  text-align: left;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}
.b-input--add-file[type=file] {
  display: none;
}
.b-form__group.b-form__group--form-comment:hover .b-form__group--add-file {
  opacity: 1;
  display: block;
  max-height: 10px;
  transition: 1s;
  position: static;
}
<div class="b-form__group b-form__group--form-comment">
  <textarea placeholder="Type message…" class="b-input b-input--new-comment"></textarea>


  <div class="b-form__group b-form__group--add-file">
    <label for="add-file" class="b-label b-label--add-file">Add files</label>
    <input type="file" id="add-file" class="b-input b-input--add-file">
  </div>
</div>

7
  • а как сделать что бы в обратную сторону так же плавно уменьшался?
    – drtvader
    26 окт 2016 в 11:07
  • @drtvader Изменил код: добавил анимацию параметра height для b-form__group--form-comment 26 окт 2016 в 11:37
  • К сожалению высота не ограничена может быть. У меня есть еще какие-то варианты?
    – drtvader
    26 окт 2016 в 11:40
  • Нужно думать, сейчас на работе, времени пока что нет. Приду домой, попробую посмотреть 26 окт 2016 в 12:26
  • Спасибо! или может тут уже js анимация нужна?
    – drtvader
    26 окт 2016 в 12:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.