* ngIf Скрыть и показать div медленно и медленно перемещать div вправо / влево в angular2 +

Question

<div id="abc">
    <div id="bac"  ngIf="show">
        <!-- Content -->
    </div>
<div id="cde">cds</div>
</div>

У меня есть div, который я хочу добавить или удалить из DOM медленно (показать и скрыть), используя * ngIf, а также добавление или удаление div.id = "bac" должно вызвать перемещение div.id = 'cde'влево или вправо медленно, как будто оживляет.

Answer 1

*ngIf вероятно, это не лучшая вещь, которую вы ищете, вместо этого используйте ngClass и определите переходы css и позиции для этих анимаций.

*ngIf полностью скрывает / показывает узел из / в DOM, это похоже на display: none/block, который не может быть анимирован с помощью css-переходов

, вот пример

<div class="animated" [ngClass]=" { 'show': show, 'hide': !show }">
  content
</div>

затем в css

.animated {
  display: inline-block;
  width: 100%;
  height: 80px;
  background: gray;
  transition: 1.5s linear margin-left;
}

.animated.show {
  margin-left: 0;
}
.animated.hide {
  margin-left: -120vw; 
}

Высота также может быть изменена, в зависимости от ожидаемого эффекта.

Здесь stackblitz с рабочим кодом