Я новичок в Bootstrap.Я использую вертикальную вкладку таблетки для модального экрана.Моя проблема: анимация изменения размера модала очень брутальная
Высота изменения моды между каждой вкладкой.Это не проблема, но это очень жестоко.Мне бы хотелось иметь плавную анимацию.
Я пробовал разные вещи с помощью javaScript, но он тоже не работал
Вот HTML-код для моего мода.Я не использовал какие-либо особенности CSS, как я использовал Bootstrap.
<div class="modal-body">
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-section-tab" data-toggle="pill" href="#v-pills-section" role="tab" aria-controls="v-pills-section" aria-selected="true">Tronçon</a>
<a class="nav-link" id="v-pills-observation-tab" data-toggle="pill" href="#v-pills-observation" role="tab" aria-controls="v-pills-observation" aria-selected="false">Observations</a>
</div>
</div>
<div class="col-9">
<div class="container tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-section" role="tabpanel" aria-labelledby="v-pills-section-tab">
<div class="row">
<div class="col-4">
Créé par
</div>
<div class="col">
<em><span id="vAnomCreator"></span></em>
</div>
</div>
<div class="row">
<div class="col-4">
Date
</div>
<div class="col">
<em><span id="vAnomDate"></span></em>
</div>
</div>
<div class="row">
<div class="col-4">
Groupes affectés
</div>
<div class="col" id="vAnomGroups">
</div>
</div>
</br>
<div class="row">
<div class="col">
<div id="divCaracterisation">
<form id="formCaracteriseAnomalie" method="POST" action="scripts/anomalies.php">
<input type="hidden" name="formAction" value="caracteriseAnomalie" />
<input type="hidden" name="inputCaracAnomUuid" id="inputCaracAnomUuid" />
<div class="form-group row">
<label class="col-sm-8 control-label" for="tronconCaracValue">Degré de dégradation globale</label>
<select class="form-control col-sm-2" id="tronconCaracValue" name="tronconCaracValue">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="form-group">
<label for="tronconCaracDescription">Commentaire global</label>
<textarea class="form-control" id="tronconCaracDescription" rows="3" name="tronconCaracDescription"></textarea>
</div>
<div class="custom-control custom-checkbox form-check">
<input type="checkbox" class="custom-control-input form-check-input" id="tronconCaracUrgente" name="tronconCaracUrgente">
<label class="custom-control-label form-check-label" for="tronconCaracUrgente">Urgent</label>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-observation" role="tabpanel" aria-labelledby="v-pills-observation-tab">
<div class="row">
<div class="col">
<h4>Observations terrains</h4>
</br>
<span id="vAnomObservation"></span>
<div id="carouselAnomaliesObservationContainer">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Кто-нибудь может дать мне простой трюк, чтобы получить менее жестокую изменяющую размер модальную анимацию?
Большое спасибо!