change zoom-in animation when viewer loaded

[marcarc]

Hi!
Thank you for your work, i was wondering about the following:

Is your feature request related to a problem? Please describe.
If I use transition: false, then turns off all transition effect.
But if I set custom transition in css, still using zoom-in animation when a new picture is loaded.

Describe the solution you'd like
I would like to have an option to edit this zoom-in animation. Or just separate from the transition attribute.

Thank you!

[fengyuanchen]

No support it. I'm sorry.

[marcarc]

Hi!
I just find an "ugly" and limited solution. Notice, after these changes, the zoomable function will not use transition anymore, so it will not smooth anymore, also the closing the viewer will not fade-out....

CSS

.viewer-fade-in {
    	animation-name: fadeInOpacity;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
          }
@keyframes fadeInOpacity {
	0% {opacity: 0;	}
	100% {opacity: 1;}
}

viewer.js

1. add new variable to the classes
   var CLASS_FADEIN = "".concat(NAMESPACE, "-fade-in");
2. find the following code:

image.style.cssText = 'height:0;' + "margin-left:".concat(viewerData.width / 2, "px;") + "margin-top:".concat(viewerData.height / 2, "px;") + 'max-width:none!important;' + 'position:absolute;' + 'width:0;';
      this.initImage(function () {
        toggleClass(image, CLASS_MOVE, options.movable);
        toggleClass(image, CLASS_TRANSITION, options.transition);
   

3. Comment out this line:
   toggleClass(image, CLASS_TRANSITION, options.transition);
4. insert the under that the following:
   toggleClass(image, CLASS_FADEIN, options.movable);
5. Turn off transition and zoomable options:

zoomable: false,
    transition: false,

[Edge-coordinates]

No support it. I'm sorry.

Is there any plan to give an interface to switch/close image loading animation?

有计划给出切换/关闭 图片加载动画的接口嘛

I'm using this library for an image viewer project, but when I encounter large images, the animation makes the image viewer run extremely laggy

Thank you~

[fengyuanchen]

No support it. I'm sorry.

Is there any plan to give an interface to switch/close image loading animation?

有计划给出切换/关闭 图片加载动画的接口嘛

I'm using this library for an image viewer project, but when I encounter large images, the animation makes the image viewer run extremely laggy

Thank you~

No plans at the moment.

[Edge-coordinates]

No support it. I'm sorry.

Is there any plan to give an interface to switch/close image loading animation?

有计划给出切换/关闭 图片加载动画的接口嘛

I'm using this library for an image viewer project, but when I encounter large images, the animation makes the image viewer run extremely laggy
Thank you~

No plans at the moment.

OK. thanks.

[jellygatorade]

Hi, I am facing a similar problem – laggy initial animation for large images. I also would like an option to disable the initial zoom animation.

Toying with a workaround like this in the meantime, where the transition option is false until an image is viewed, but I'm not sure it produces satisfactory user experience.

let $viewer = new Viewer(img, {
    transition: false,
    viewed: onViewed,
});

function onViewed() {
    $viewer.options.transition = true;
}