Как оживить модальное изменение размера с помощью javascript, jquery или css? - PullRequest
Новая
       6

Как оживить модальное изменение размера с помощью javascript, jquery или css?

0 голосов
/ 02 февраля 2020

Я использую bootstrap для отображения модального диалога и jquery для динамического отображения / скрытия некоторых элементов модального режима. У меня проблема в том, что, когда я показываю или скрываю элемент, модальный размер немедленно изменяется. То, что я хотел бы сделать, это сделать так, чтобы он перешел на новый размер с анимацией jquery или css.

Я попытался выполнить sh с помощью css с помощью: 

.modal {
    flex-grow: 1;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

Но это не сработало.

Вот пример модального я использую: 

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
           <p>A paragraph</p>
        </div>
    </div>
</div>

Спасибо за вашу помощь с этим -

1 Ответ

1 голос
/ 02 февраля 2020

Видимо, анимация элемента при добавлении к нему контента с помощью css или javascript практически невозможна. Я до сих пор не нашел способ сделать это только с css. Это связано с тем, что браузер немедленно отображает содержимое и обновляет элемент автоматической высоты. По-видимому, это не вызывает ни одного из css переходов. Что еще хуже, то же самое происходит при использовании javascript. Используемая здесь техника основана на этом ответе и является решением jQuery: { ссылка }

Я думаю, это то, что вы ищете. 

$('#add-content').on('click', function() {
  $('<p>Moar Stuff</p>').css({display: 'none'}).appendTo(('.modal-body')).show('slow');
});
.modal-body {
overflow:hidden;
  transition:transform 19s ease-out; // note that we're transitioning transform, not height!
  height:auto;
  transform:scaleY(1); // implicit, but good to specify explicitly
  transform-origin:top; // keep the top of the element in the same place. this is optional.
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>



<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p id="content">...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="add-content">Add Content</button>

      </div>
    </div>
  </div>
</div>
...