Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

change zoom-in animation when viewer loaded #462

Open
marcarc opened this issue Apr 8, 2021 · 5 comments
Open

change zoom-in animation when viewer loaded #462

marcarc opened this issue Apr 8, 2021 · 5 comments

Comments

@marcarc
Copy link

marcarc commented Apr 8, 2021

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!

@marcarc marcarc changed the title change zoo-in animation when viewer loaded change zoom-in animation when viewer loaded Apr 8, 2021
@fengyuanchen
Copy link
Owner

No support it. I'm sorry.

@marcarc
Copy link
Author

marcarc commented Apr 11, 2021

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);
   
  1. Comment out this line:
    toggleClass(image, CLASS_TRANSITION, options.transition);
  2. insert the under that the following:
    toggleClass(image, CLASS_FADEIN, options.movable);
  3. Turn off transition and zoomable options:
zoomable: false,
    transition: false,

@Edge-coordinates
Copy link

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
Copy link
Owner

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants