Only show a single li element in CSS at a time

Question

Only show a single li element in CSS at a time

I'm working with Angular 2 and I have a list:

    <ul>
        <li *ngFor="let show of (ann)">
            {{show}}
        </li>
    </ul>

I want to show one item from the list every 3 seconds in an infinite loop.

Here's my array:

ann: Array<any> = [
    {
      name: "ABC"
    },
    {
      name: "DEF"
    },
    {
      name: "ZZZ"
    }
];

First 3 seconds: display ABC
Next 3 seconds: display DEF, while ABC disappears
Following 3 seconds: display ZZZ, replacing DEF
After 3 seconds: display ABC again and continue in an infinite loop

How can I achieve this using CSS?

css angular

Answer 1

Answer №1

Implementing animations in Angular 2 can enhance the user experience.

To see a live demonstration, visit this link

app.component.ts

@Component({
  selector: 'my-app',
  animations: [
    trigger('displayName', [
      state('in', style({ opacity: 1, transform: 'translateY(0)' })),
      state('out', style({ opacity: 0, display: "none", transform: 'translateY(100%)' })),
      transition('in => out', [
        style({ transform: 'translateY(0)', opacity: 1 }),
        animate('0.5s', style({ transform: 'translateY(100%)', opacity: 0 }))
      ]),
      transition('out => in', [
        style({ transform: 'translateY(100%)', opacity: 0 }),
        animate('0.5s ease-out', style({ transform: 'translateY(0)', opacity: 1 }))
      ])
    ])
  ]
})
export class App {
  name:string;
  currentIndex: number;

  students: [] = [
    {
      name: "Alice",
      animationState: 'in'
    },
    {
      name: "Bob",
      animationState: 'out'
    },
    {
      name: "Charlie",
      animationState: 'out'
    }
  ];

  constructor() {
    this.name = 'Angular Animations';
    this.currentIndex = 0;
  }

  ngOnInit() {
    setInterval((function(){
      console.log(this.currentIndex);
      this.students[this.currentIndex].animationState = 'out';
      this.currentIndex++;
      if(this.currentIndex >= this.students.length) {
        this.currentIndex = 0;
      }
      this.students[this.currentIndex].animationState = 'in';
    }).bind(this), 4000);
  }
}

html

<div>
  <h2>Greetings, {{name}}!</h2>
</div>
<div *ngFor="let student of students" [@displayName]="student.animationState">
    Hello, {{student.name}}
</div>

Answer 2

Implementing animations in Angular 2 can enhance the user experience.

To see a live demonstration, visit this link

app.component.ts

@Component({
  selector: 'my-app',
  animations: [
    trigger('displayName', [
      state('in', style({ opacity: 1, transform: 'translateY(0)' })),
      state('out', style({ opacity: 0, display: "none", transform: 'translateY(100%)' })),
      transition('in => out', [
        style({ transform: 'translateY(0)', opacity: 1 }),
        animate('0.5s', style({ transform: 'translateY(100%)', opacity: 0 }))
      ]),
      transition('out => in', [
        style({ transform: 'translateY(100%)', opacity: 0 }),
        animate('0.5s ease-out', style({ transform: 'translateY(0)', opacity: 1 }))
      ])
    ])
  ]
})
export class App {
  name:string;
  currentIndex: number;

  students: [] = [
    {
      name: "Alice",
      animationState: 'in'
    },
    {
      name: "Bob",
      animationState: 'out'
    },
    {
      name: "Charlie",
      animationState: 'out'
    }
  ];

  constructor() {
    this.name = 'Angular Animations';
    this.currentIndex = 0;
  }

  ngOnInit() {
    setInterval((function(){
      console.log(this.currentIndex);
      this.students[this.currentIndex].animationState = 'out';
      this.currentIndex++;
      if(this.currentIndex >= this.students.length) {
        this.currentIndex = 0;
      }
      this.students[this.currentIndex].animationState = 'in';
    }).bind(this), 4000);
  }
}

html

<div>
  <h2>Greetings, {{name}}!</h2>
</div>
<div *ngFor="let student of students" [@displayName]="student.animationState">
    Hello, {{student.name}}
</div>

Answer 3

Answer №2

To achieve this in the template, you can utilize Rxjs.

    <div>
      <h2>Greetings {{name}}</h2>
    </div>
<div *ngFor="let pupil of $students | async">
    {{pupil.name}}
</div>

And in the component:

 students: Array<any> = [
    {
      name: "Alan"
    },
    {
      name: "Jake"
    },
    {
      name: "Harry"
    },
    {
      name: "Susan"
    },
    {
      name: "Sarah"
    },
    {
      name: "Esther"
    }
];

  constructor() {
    this.name = 'Angular2'
    var timer = 0;
    this.$students = Observable.from([[], ...this.students])
    .mergeMap(x => Observable.timer(timer++ * 1000).map(y => x))
    .scan((acc, curr, seed) => {
      acc.push(curr);
      return acc;
    });
  }

Check out the demo here

Answer 4

To achieve this in the template, you can utilize Rxjs.

    <div>
      <h2>Greetings {{name}}</h2>
    </div>
<div *ngFor="let pupil of $students | async">
    {{pupil.name}}
</div>

And in the component:

 students: Array<any> = [
    {
      name: "Alan"
    },
    {
      name: "Jake"
    },
    {
      name: "Harry"
    },
    {
      name: "Susan"
    },
    {
      name: "Sarah"
    },
    {
      name: "Esther"
    }
];

  constructor() {
    this.name = 'Angular2'
    var timer = 0;
    this.$students = Observable.from([[], ...this.students])
    .mergeMap(x => Observable.timer(timer++ * 1000).map(y => x))
    .scan((acc, curr, seed) => {
      acc.push(curr);
      return acc;
    });
  }

Check out the demo here

Answer 5

Answer №3

Based on my understanding of your request, it seems like you are interested in a format similar to the following:

li {
  opacity: 0;
  animation: display 10s infinite;
}

li:nth-child(1) {
  animation-delay: 1s;
}
li:nth-child(2) {
  animation-delay: 3s;
}
li:nth-child(3) {
  animation-delay: 5s;
}
li:nth-child(4) {
  animation-delay: 7s;
}
li:nth-child(5) {
  animation-delay: 9s;
}

@keyframes display {
  0% {  opacity: 1  }
  20% { opacity: 0  }
}

<ul class="num-1">
  <li>Jake</li>
  <li>Esther</li>
  <li>John</li>
  <li>Ann</li>
  <li>Someone</li>
</ul>

Alternatively, you may prefer the following arrangement:

li {
  opacity: 0;
  animation: display 10s infinite;
}

li:nth-child(1) {
  animation-delay: 1s;
}
li:nth-child(2) {
  animation-delay: 3s;
}
li:nth-child(3) {
  animation-delay: 5s;
}
li:nth-child(4) {
  animation-delay: 7s;
}
li:nth-child(5) {
  animation-delay: 9s;
}

@keyframes display {
  20% {  opacity: 1  }
  30% { opacity: 0  }
}

<ul class="num-1">
  <li>Jake</li>
  <li>Esther</li>
  <li>John</li>
  <li>Ann</li>
  <li>Someone</li>
</ul>

Answer 6

Based on my understanding of your request, it seems like you are interested in a format similar to the following:

li {
  opacity: 0;
  animation: display 10s infinite;
}

li:nth-child(1) {
  animation-delay: 1s;
}
li:nth-child(2) {
  animation-delay: 3s;
}
li:nth-child(3) {
  animation-delay: 5s;
}
li:nth-child(4) {
  animation-delay: 7s;
}
li:nth-child(5) {
  animation-delay: 9s;
}

@keyframes display {
  0% {  opacity: 1  }
  20% { opacity: 0  }
}

<ul class="num-1">
  <li>Jake</li>
  <li>Esther</li>
  <li>John</li>
  <li>Ann</li>
  <li>Someone</li>
</ul>

Alternatively, you may prefer the following arrangement:

li {
  opacity: 0;
  animation: display 10s infinite;
}

li:nth-child(1) {
  animation-delay: 1s;
}
li:nth-child(2) {
  animation-delay: 3s;
}
li:nth-child(3) {
  animation-delay: 5s;
}
li:nth-child(4) {
  animation-delay: 7s;
}
li:nth-child(5) {
  animation-delay: 9s;
}

@keyframes display {
  20% {  opacity: 1  }
  30% { opacity: 0  }
}

<ul class="num-1">
  <li>Jake</li>
  <li>Esther</li>
  <li>John</li>
  <li>Ann</li>
  <li>Someone</li>
</ul>

Only show a single li element in CSS at a time

Answer №1

Answer №2

Answer №3

Similar questions

Maintain the visibility of the jQuery dropdown menu even when navigating to a different page within the

What is the best way to include some white space around a paragraph?

Tips for implementing loading functionality with Interceptor in Angular version 17

Adjusting the duration of the timeout for HTTP requests using Node.js alongside Angular 4 or Express

Custom AG Grid PCF Control - Styling without the need for a separate CSS loader

When clicking on HTML input fields, they do not receive focus

Tips on preventing the constant shifting of my webpage div elements when resizing the browser

The server will only load on Safari's localhost and not on Chrome's

Guide to Embedding an External CSS Stylesheet

Utilizing PHP to create an interactive website

Utilizing a background image in the slick slider

Arrange a cluster of CSS table cells onto a fresh line

Creating a Runescape Tracker: What essentials should I include?

The console errors in the test are being triggered by the Angular setTimeout() call within the component, despite the test still passing successfully

Designing the appearance of a button in a filefield xtype

Prevent mat-table rows from collapsing when new data is added (Angular Material)

Encountered an error while attempting to upload image to Web API using Angular

When utilizing narrow resolutions, header letters may overlap each other

The appearance of online and local websites varies on a single screen and browser

Tips for applying a CSS class with a smooth fade-out effect