Question

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

我有一个div要使用* ngIf缓慢地从DOM中添加或删除（显示和隐藏），同样地，添加或删除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，上面有工作代码

* ng如果隐藏并缓慢显示div，然后将div缓慢地向右/向左移动angular2 +

1 个答案: