javascript - How to iterate an animation infinitely in Angular - Stack Overflow

admin管理员组

文章数量:1356267

I want to iterate animation infinitely and stop and start in my ponent. I have written the below code:

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
  animations: [
    // Each unique animation requires its own trigger. The first argument of the trigger function is the name
    trigger('run', [transition('void => *',[animate(1000, keyframes([
      style({transform: 'translateX(0)    rotateY(0)',        offset: 0}),
      style({transform: 'translateX(10%)  rotateY(70deg)',    offset: 0.33}),
      style({transform: 'translateX(20%) rotateY(30deg)',   offset: 0.66}),
      style({transform: 'translateX(0%)',                  offset: 1.0})
    ]))
    ])  
  ])  
]
}) 

In the HTML file I have written below code:

<img  @run id="animicon" src="assets/.../logo_1.png" style="background:black" class="image--background">

I want to iterate animation infinitely and stop and start in my ponent. I have written the below code:

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
  animations: [
    // Each unique animation requires its own trigger. The first argument of the trigger function is the name
    trigger('run', [transition('void => *',[animate(1000, keyframes([
      style({transform: 'translateX(0)    rotateY(0)',        offset: 0}),
      style({transform: 'translateX(10%)  rotateY(70deg)',    offset: 0.33}),
      style({transform: 'translateX(20%) rotateY(30deg)',   offset: 0.66}),
      style({transform: 'translateX(0%)',                  offset: 1.0})
    ]))
    ])  
  ])  
]
}) 

In the HTML file I have written below code:

<img  @run id="animicon" src="assets/.../logo_1.png" style="background:black" class="image--background">

• javascript
• css
• angular
• typescript
• angular-animations

Share Improve this question Follow edited Apr 11, 2022 at 14:08 Vega 28.7k2828 gold badges120120 silver badges145145 bronze badges asked Apr 3, 2019 at 6:59 Abhijit ChakraAbhijit Chakra 3,24233 gold badges4242 silver badges6767 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Using Angular animations would be incorrect in this context. They are intended to be used when the ponent is added via router or *ngIf or programmatically, when the regular/plain CSS cannot be used or wont work.
Adding them would only make your code unnecessarily plexe, even slow.
For the case you described in your post, you don't need an Angular animation, plain css animation is plenty enough:

CSS

@keyframes myAnimation {
  0%   {transform: translateX(0) rotateY(0)}
  33%  {transform: translateX(10%) rotateY(70deg)}
  66%  {transform: translateX(20%) rotateY(30deg)}
  100% {transform: translateX(0%)}
}

img {
  animation: myAnimation 5s infinite;
}

Demo

---

However, if you still want to use Angular approach, here is a take.

ts:

.....
animations: [
    // Each unique animation requires its own trigger. The first argument of the trigger function is the name
    trigger('run', [
      transition('* => *', [
        animate(
          1000,
          keyframes([
            style({ transform: 'translateX(0)    rotateY(0)', offset: 0 }),
            style({
              transform: 'translateX(10%)  rotateY(70deg)',
              offset: 0.33,
            }),
            style({
              transform: 'translateX(20%) rotateY(30deg)',
              offset: 0.66,
            }),
            style({ transform: 'translateX(0%)', offset: 1.0 }),
          ])
        ),
      ]),
    ]),
  ],

  ....
  trigger: boolean;

  ngOnInit() {
    setInterval(() => (this.trigger = !this.trigger),1000);
  }

HTML:

<img
  [@run]="trigger"
  .....
/>

demo

本文标签： javascriptHow to iterate an animation infinitely in AngularStack Overflow