Css-animator blinking when starting animation

@soldierftl wrote:

Hi guys,

I have a problem with animate.css : when i start an animation, the div blinks and then does its animation with a small “offset” from original position.

Do you know what may cause this ? Here’s the code, it’s easy to reproduce the bug :
home.html

<ion-content padding>
  <button ion-button (click)="animate()">Animate !</button>
  <div #element>
    <h1>Hi ! gepkhr tjhiorj thjt ilhjtyioh ytr</h1>
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  </div>
</ion-content>

home.ts

import { AnimationService, AnimationBuilder } from 'css-animator';
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class FichesDuJourPage {

  private animator: AnimationBuilder;
  @ViewChild('element') el;

  animate() {
    this.animator.setType('swing').show(this.el.nativeElement);
  }

  constructor(public navCtrl: NavController, public navParams: NavParams, animationService: AnimationService) {
    this.animator = animationService.builder();
  }
}

“css-animator”: “^2.3.1”

Thank you in advance for your insights
PS : it seems to work if i don’t do the animation with this.animator but do it directly with animate.css (but i need css-animator because i have to do things on “animationend”)

Posts: 1

Participants: 1

Read full topic