新渲染元素的动画，但不是页面加载

我订阅了Firebase实时数据库，因此当我向其提交内容时，它立即在视图中呈现，而不需要任何jQuery或ajax。新渲染元素的动画，但不是页面加载

我想动画渲染这些元素，以便当一个新元素被添加到DOM时，它的div的background-color是绿色的并且慢慢消失。我不想要的是该类的所有div在加载时执行此动画。

我知道该怎么做了前者：

@keyframes green-fade { 
    0% {background: rgb(173, 235, 173);} 
    100% {background: none;} 
} 

.post-div { 
    animation: green-fade 5s ease-in 1; 
}

但是，当然，这部动画发生此类它的渲染，包括负载的任何时间。

我很感兴趣的是“Angular 2 way”来做到这一点。

来源

2017-03-17 J. Adam Connor

由于角4.25有做到这一点更简单的方法：如果你想抑制：在视图初始化进入动画，只需用下面的动画把它包：

template: ` 
    <div [@preventInitialChildAnimations]> 
    <div [@someAnimation]>...</div> 
    </div> 
`, 
animations: [ 
    trigger('preventInitialChildAnimations', [ 
    transition(':enter', [ 
     query(':enter', [], {optional: true}) 
    ]) 
    ]), 
    ... 
]

来源

2017-09-12 23:06:58

这对我来说是正确的答案。谢谢！ – IRCraziestTaxi

更新了接受的答案，因为它解决了当前的Angular版本。 –

在角4.2.4中对我不起作用，动画仍然在页面加载时发生 – Vignesh

添加一个触发器，用于检查物品通过网络时的状态。我在这里触发动画时itemState是new。

trigger('itemState', [ 
 
     transition('* => new', animate(5000, keyframes([ 
 
     style({ backgroundColor: 'red', offset: 0 }), 
 
     style({ backgroundColor: '*', offset: 1.0 }) 
 
     ]))),

给你触发到您的项目的状态的参考，并将其设置为空时，在动画完成。

<div [@itemState]="someItem.itemState" (@itemState.done)="someItem.itemState=''">

一定要一个itemState属性添加到您的文章，让你可以标记他们如新！

来源

2017-03-17 02:15:39

如果你没有使用某种类型的本地数据存储，那么你必须在itemState.done上进行API调用。例如：'（@ itemState.done）=“someApiCall（）'将项目状态设置为null或在API级别设置“old”，并在本地设置为“old”或“null”。 –

是的，我想我只是做数据库调用。再次，我使用的是AngularFire，因此数据库中项目状态的更改实时反映出来。 –

这当然只会在用户浏览页面时向用户显示动画。嗯，也许是经过一段时间后API调用的东西？ –

您可以使用生命周期钩子AfterViewInit在初始视图渲染完成后激活动画。

https://embed.plnkr.co/5l1kf5lMLEXSE8pNzqik/

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div *ngFor="let item of items" [@greenFade]="animate ? 'in' : null"> 
     {{item}} 
    </div> 

    <button (click)="addItem()">add</button> 
    `, 
    animations: [ 
    trigger('greenFade', [ 
     transition('void => in', [style({background: 'rgb(173, 235, 173)'}), animate('5s ease-in')]) 
    ]) 
    ] 
}) 
class App implements AfterViewInit { 
    constructor(private cdRef: ChangeDetectorRef){} 

    items: String = ['Item','Item','Item']; 
    addItem(){ 
    this.items.push('Item'); 
    } 

    animate: boolean; 
    ngAfterViewInit(){ 
    this.animate = true; 
    this.cdRef.detectChanges(); 
    } 
}

来源

2017-03-25 14:00:11

每次渲染视图都不会触发动画吗？ –

是什么让你这么想？当@ GreenFade属性从void变为'in'时，每个项目的动画被触发，换句话说：如果它的第一个值是'in'。这只发生一次。对于初始项目，它根本不会发生。他们从void变为null，然后从null变为'in'。 –

哦，你是对的！让我看看这个与接受的答案相比的好处。我认为当然最明显的是，这不需要在后端设置任何值。我想这取决于你的用例。 –

新渲染元素的动画，但不是页面加载

回答

相关问题