Bootstrap нижний колонтитул карты для перемещения вверх и вниз с скользящей анимацией

Question

Я использую приведенную ниже карту, и внутри нее есть окно поиска, когда пользователь нажимает на поле поиска, оно предоставляет пользователю некоторое предложение, которое в основном представляет собой список. Когда отображается этот список, нижний колонтитул карты перемещается вниз (без анимации), а когда я очищаю список предложений, нижний колонтитул подпрыгивает вверх (без анимации). Как добавить анимацию в обеих точках, когда она перемещается вверх и вниз, мой код находится в Vue. js, и я попробовал вариант перехода, но это не сработало.

<div class="card text-center">
  <div class="card-header">
    This is Header
  </div>
  <div class="card-body">
   <div class="input-group">
  <input type="text" class="form-control" placeholder="Search..." aria-label="Search" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>
  </div>
  <div class="card-footer text-muted">
    This is footer
  </div>
</div>

После ввода в поле поиска, он дает вам предложение, которое заставляет нижний колонтитул двигаться вниз

Используя этот код для заполнения моего массива списка предложений, который я называю FilterLoggersList [], loggersListInit.allLevels - это, по сути, JSON массива, который представляет собой нефильтрованный список регистраторов. Приведенные ниже коды в основном фильтруют массив на основе того, что пользователь вводит в поле поиска.

filteredLoggers() {
      if (this.searchData != "") {
        this.filteredLoggersList = this.loggersListInit.allLevels.filter(
          log => {
            return log.name
              .toLowerCase()
              .includes(this.searchData.toLowerCase());
          }
        );
      } else {
        this.filteredLoggersList = [];
      }
    },