Reports

You don’t need jQuery for this — Angular animations can handle it cleanly.

Your main goal is to make one text slide out, another slide in, and swap them after the animation.

You can do that with a simple animation trigger and an event callback that updates the text when the animation finishes.

Here’s a minimal working example (Angular 19): import { Component } from '@angular/core';

import { bootstrapApplication } from '@angular/platform-browser';

import { trigger, state, style, transition, animate } from '@angular/animations';

import { provideAnimations } from '@angular/platform-browser/animations';

@Component({

selector: 'app-root',

animations: [

trigger('slide', \[

  state('up', style({ transform: 'translateY(-100%)', opacity: 0 })),

  state('down', style({ transform: 'translateY(0)', opacity: 1 })),

  transition('up \<=\> down', animate('300ms ease-in-out')),

\]),

template: `

\<h3\>Angular animation: sliding text\</h3\>

\<div class="box"\>

  \<div

    class="panel"

    \[@slide\]="state"

    (@slide.done)="onDone()"

  \>

    {{ currentText }}

  \</div\>

\</div\>

\<button (click)="animate()"\>Animate\</button\>

\<button (click)="reset()"\>Reset\</button\>

styles: [`

.box { position: relative; height: 60px; overflow: hidden; }

.panel { position: absolute; width: 100%; text-align: center; font-size: 18px; background: #f6f6f6; }

button { margin: 6px; }

`],

})

export class App {

state: 'up' | 'down' = 'down';

currentText = 'Login';

nextText = 'Welcome 1';

count = 1;

animate() {

this.state = this.state === 'down' ? 'up' : 'down';

}

reset() {

this.count++;

this.nextText = \`Welcome ${this.count}\`;

this.animate();

}

onDone() {

if (this.state === 'up') {

  this.currentText = this.nextText;

  this.state = 'down'; // reset position

}

}

bootstrapApplication(App, { providers: [provideAnimations()] });

How it works:

slide animation moves text up/down with opacity transition.
When the animation ends, onDone() swaps the text — similar to your jQuery setTimeout logic.
reset() updates the next message (for example, a new date or visitor count).
Every time you click Animate, the text slides and updates just like in your jQuery example.

79797371