由于添加/删除DOM元素而导致位置更改时的CSS转换

时间:2018-03-01 13:34:43

标签: css angular ionic-framework css-transitions transition

是否有办法为因DOM中添加/删除其他元素而改变位置的元素设置过渡动画?

我使用ionic和angulars *ngIf指令有条件地添加/删除DOM中的元素。这些我可以通过角动画轻松制作动画。添加/删除这些元素将导致另一个元素"改变位置"在页面上,有没有办法动画这个过渡?

<ion-row>
   <ion-col id="col1" *ngIf="show1" [@animate1]>some-content1</ion-col>
   <ion-col id="col2">some-content2</ion-col>
   <ion-col id="col3" *ngIf="!show1" [@animate3]>some-content3</ion-col>
</ion-row>

我要么有第1列和第2列显示,要么是2和3.第2列始终在页面上,但是将位置从2列中的右列更改为左列。我希望为此过渡设置动画,以便让整个页面向左(或向右)移动,并分别将col1col3移入视图中。 它基本上有效,但col2&#34;跳跃&#34;当1和3的动画完成时,我希望它也是动画的。这可能吗?

0 个答案:

没有答案