Angular - как заменить это изменение состояния jQuery на правильный код Angular? - PullRequest
Новая
       15

Angular - как заменить это изменение состояния jQuery на правильный код Angular?

0 голосов
/ 21 ноября 2018

В компоненте у меня есть субъект, который запускает .next(value), и он запускает эту логику jQuery: 

  if (this.isOpen) {
    jQuery(`#preview-${this.index}`).
      stop().slideDown('fast');
  } else {
    jQuery(`#preview-${this.index}`).
      stop().css('display', 'block').slideUp('fast');
  };

Вы можете видеть, что он нацелен на идентификатор, поэтому я знаю, что должен заменить этос конструктором @ViewChild.

Как использовать @ViewChild в сочетании с ключевыми кадрами scss для достижения той же функциональности, чтобы я мог удалить JQuery.

Поскольку это очень простой переход CSS, я ищу способ сделать это без использования библиотеки угловой анимации (если это, конечно, не единственный способ).

ПримечаниеЯ нашел ту же самую проблему, которую задавали и отвечали для AngularJS здесь , но не Angular (пока что!)

1 Ответ

0 голосов
/ 21 ноября 2018

Было несколько проблем при создании этой работы:

  1. Обратите внимание, что в конце кода применяется «display: none», чтобы скрыть элемент.jQuery применяет это после окончания анимации.Таким образом, проблема в том, что вы не можете анимировать дисплей: нет (очевидно, потому что там ничего нет!). Этот вопрос помог мне понять это.

  2. Слайд-слайд jQuery просто анимирует высоту элемента, доводя его до 0.

Так что с этим знанием стало довольно легко.Сначала установите два состояния с помощью классов css и анимации: 

.fb-card-open {
  display: block;
}
.fb-card-closed {
  display: block;
  overflow: hidden;
  animation: slideup;
  padding-top: 0;
  padding-bottom: 0;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
@keyframes slideup {
  0% { height:inherit; }
  100% { height:0; }
}

Это означает, что у нас есть открытое состояние и закрытое состояние на 100%, что в основном устанавливает высоту в 0 и удаляет отступы сверху и снизу(поскольку внутри анимированного элемента есть дополненный текст, поэтому даже при высоте 0 вы все равно увидите некоторое вертикальное пространство)

Затем используйте директиву [ngClass] для переключения между двумя классами: 

[ngClass]="{'fb-card-open': isOpen, 'fb-card-closed' : !isOpen }"

Благодаря этой статье , которая помогла понять, как это сделать (статья посвящена AngularJS, а не Angular, но принцип такой же, как и директива [ngClass], ведет себя так же)

Примечание Если вы установите отступ: 0 вместо только сверху и снизу, вы получите крутой эффект «влетания» для дочерних элементов элемента, что является своего рода изящным бонусом, который я нашелделаем это!

...