Animation doesn't work if calling programatically?

[LufoX11]

Please provide you version information :

Dependency	Version
ionic3	3.7.1
angular	4.4.3
ionic-img-viewer	2.6.1

Have you checked...

• [x] That npm install returns no warning ?
• [x] Doing a purge of your node_modules folder ?

First of all, this plugin is fantastic! I'm using it to display full res images on this project: http://app.mywayapp.io Eg: Obras -> (click an image) -> (click the top image) It shows the image as expected, but I noticed it's not applying the cool "intro/end" animation. I'm using it in other projects and it works good when using the directive to call preview (with "imageViewer" attribute in the img element), but here I'm doing it programatically:

this._imageViewerCtrl.create(img).present();

Taking a quick view to your component, I think it's not applying these styles:

...
 29         imgElement.style[css.transformOrigin] = '0 0';                                                                                                                      
 30         image.fromTo('translateY', flipY + "px", '0px')
 31             .fromTo('translateX', flipX + "px", '0px')
 32             .fromTo('scale', flipS, '1')
 33             .afterClearStyles([css.transformOrigin]);
 34         backdrop.fromTo('opacity', '0.01', '1');
...

Am I doing something wrong or do I need to do something else?

Thanks!

[LufoX11]

Any help would be really appreciated @Riron

Thanks.

[Riron]

Hi, Sorry i have been very busy those days and didn't have time to look at the issues. Triggering the viewer programatically should animate the image.

How exactly is the img variable passed to this._imageViewerCtrl.create() method ? From the template ? Or with a @ViewChild decorator ?

[LufoX11]

I'm passing the object from a directive, that is the equivalent to do it from the template.

[Riron]

All right, I just tested your app and the way you pass the element seems fine. I think I found the problem, it has something to do with the way I do my animation with very big pictures as the ones you have. I'll release a fix in the next version. It should be very soon.

[LufoX11]

Thanks man! I'll be waiting for it. Nice job BTW!!

[Riron]

It should be fixed now ! Please try 2.8.0 or 2.9.0 depending on you Ionic version

[LufoX11]

@Riron I appreciate the gesture man. Sadly it didn't work. You can test it in http://app.mywayapp.io (I've updated to 2.8.0 since I didn't update ionic-angular to 3.9.0 yet).

[Riron]

Replace

if (el.srcHigh) {
  var img = new Image();
  img.src = el.srcHigh;
  this._imageViewerCtrl.create(img).present();
}

with something like

if (el.srcHigh) {
  this._imageViewerCtrl.create(el, { fullResImage: el.srcHigh }).present();
}

If you create a new image element, the library has no way of knowing where the original image is in the page and how to transition from it.

[LufoX11]

Thanks man! That worked :smiley: Sorry I didn't answer before but I've been out of the city these days.

Have a nice week!