javascript - How do I perform infinite animations in Angular 2? - Stack Overflow

admin管理员组

文章数量:1299712

Basically, I want to make use of the web-animations-api polyfill in angular (4 currently) to perform infinite animations on elements.

Let's see a basic non-angular example:

var ball = document.getElementById('ball');

ball.animate([
  { transform: 'scale(0.5)' },
  { transform: 'scale(1)' }
], {
  duration: 1000,
  iterations: Infinity,
  direction: 'alternate',
  easing: 'ease-in-out'
});

.container {
  position: relative;
  width: 100%;
  height: 200px;
}

.ball {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #E57373;
  background: #F06292;
  box-shadow: 0px 0px 15px #F06292;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

<script src=".2.5/web-animations.min.js"></script>
<div class="container">
  <div class="ball" id="ball"><div>
</div>

Basically, I want to make use of the web-animations-api polyfill in angular (4 currently) to perform infinite animations on elements.

Let's see a basic non-angular example:

var ball = document.getElementById('ball');

ball.animate([
  { transform: 'scale(0.5)' },
  { transform: 'scale(1)' }
], {
  duration: 1000,
  iterations: Infinity,
  direction: 'alternate',
  easing: 'ease-in-out'
});

.container {
  position: relative;
  width: 100%;
  height: 200px;
}

.ball {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #E57373;
  background: #F06292;
  box-shadow: 0px 0px 15px #F06292;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"></script>
<div class="container">
  <div class="ball" id="ball"><div>
</div>

How do I translate that into Angular?

This is what I've tried so far but only works once:

animations: [
  trigger('scale', [
    transition('* <=> *', animate('1s ease-in-out', keyframes([
      style({ transform: 'scale(0.5)' }),
      style({ transform: 'scale(1)' })
    ]))) // How do I specify the iterations, or the direction? 
  ])
]

Is there a way to do that with the @angular/animation plugin instead of storing a ElementRef and doing it as the example above? or maybe I misunderstood what this plugin is intended for?

Thanks in advance.

• javascript
• angular
• web-animations
• angular-animations

Share Improve this question Follow edited Jun 14, 2017 at 7:27 Lucas 10.3k66 gold badges4444 silver badges5555 bronze badges asked Jun 14, 2017 at 3:52 Mauro AguilarMauro Aguilar 1,33811 gold badge1414 silver badges2323 bronze badges 1

• Could this be helpful? stackoverflow.com/questions/42963315/… – M0CH1R0N Commented Jul 28, 2017 at 8:39

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 21

I was searching infinite animation for my project. There is no documentation for this in angular.io. So i tried this way and cost me many hours to achieve this. Hope it will help others. First define animation in your class.

animations: [
trigger('move', [
  state('in', style({transform: 'translateX(0)'})),
  state('out', style({transform: 'translateX(100%)'})),
  transition('in => out', animate('5s linear')),
  transition('out => in', animate('5s linear'))
]),
]

then insert it in your html

<div [@move]="state" (@move.done)="onEnd($event)"></div>

then set state = 'in' and in ngAfterViewInit() lifecycle hook, update your state property value 'out' with setTimeout function and after end callback function, update your state property value into 'in' and check your state property value, if in then update into out by setTimeout function like this

export class AppComponent implements AfterViewInit {
  state = 'in';
  ngAfterViewInit() {
    setTimeout(() => {
      this.state = 'out';
    }, 0);
  }
  onEnd(event) {
    this.state = 'in';
    if (event.toState === 'in') {
      setTimeout(() => {
        this.state = 'out';
      }, 0);
    }
  }
}

Happy coding :)

Infinite animations in Angular can be achieved, not much out there on it, but this is working nicely for me for onenter and onleave animation.

When 'mouseenter' the animation plays in a loop, it stops on 'mouseleave'.

I am using Angular 6.

Angular CLI: 6.0.8 Node: 8.9.3 OS: linux x64 Angular: 6.1.4 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router

rxjs 6.2.2 typescript 2.7.2 webpack 4.8.3

---

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

@Component({
  selector: 'hot-spot',
  templateUrl: './myComp.component.html',
  styleUrls: ['./myComp.component.css'],
  animations: [
    trigger('compState', [
      state('small', style({
        opacity: '0.5',
        transform: 'scale(0.8)'
      })),
      state('large', style({
        opacity: '1',
        transform: 'scale(1.2)'
      })),
      transition('small => large', animate('0.6s 100ms ease-in')),
      transition('large => small', animate('0.7s 100ms ease-out'))
    ]),
  ]
})
export class MyComponent {

  state: string = 'none';
  isEnter: boolean = false;


  onMouseEnter(evt: MouseEvent) {
    console.log('onMouseEnter()');
    this.state = 'small';
    this.isEnter = true;
  }

  onMouseLeave(evt: MouseEvent) {
    console.log('onMouseLeave()');
    this.state = 'large';
    this.isEnter = false;
  }

  onEnd(event) {
    if (this.isEnter) {
      if (event.toState === 'small') {
        this.state = 'large';
      }
      else {
        this.state = 'small';
      }
    }
  }

}

And the HTML

<div
  (mouseenter)="onMouseEnter($event)"
  (mouseleave)="onMouseLeave($event)">

  <div>
    <div
      [@compState]="state"
      (@compState.done)="onEnd($event)">

      <button
        (click)="onSceneClick($event,data.sceneId)"
        type="button"
        class="btn btn-link" >
        <i class="fa fa-angle-double-up" style="font-size:16pt;color:red">
          <br><span style="font-size:12pt">{{data.text}}</span>
        </i>

      </button>
    </div>
  </div>

You can try WebComponents to use Web Animations API in a declarative way (Animating any html element by using components):

<!-- Add Web Animations Polyfill :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js"></script>

<script type="module" src="https://unpkg.com/@proyecto26/[email protected]/dist/animatable-component/animatable-component.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@proyecto26/[email protected]/dist/animatable-component/animatable-component.js"></script>

<animatable-component
  autoplay
  easing="ease-in-out"
  duration="800"
  delay="300"
  animation="zoomIn"
  iterations="Infinity"
  direction="alternate"
  style="display: flex;align-self: center;"
>
  <h1>Hello World</h1>
</animatable-component>

There are a lot of defined animations, but also you can create custom animations by using keyFrames.

Check here to use it with Angular, React, VueJS, etc: https://github.com/proyecto26/animatable-component#framework-integrations

本文标签： javascriptHow do I perform infinite animations in Angular 2Stack Overflow