问题
Is it possible to specify which transition to use in fancyBox 3? There are 3 transitions I'm interested in:
- Open slide/gallery
- Navigate between slides
- Close slide/gallery
By default, fancyBox 3 uses different transitions for different types of content.
<a href="img.jpg" data-fancybox><img src="thumb.jpg"></a> <!--This will zoom in-->
<a data-fancybox href="#html-content">Open</a> <!--This will fade in-->
<div id="html-content" style="display: none;">
<p>This content does just fades in.</p>
</div>
Look at this codePen to see it in action, including the navigation transitions. For images we have:
- Zoom in
- Slide horizontally
- Zoom out
For html content we have:
- Fade in
- Slide horizontally
- Fade out
Is it possible to change this default behavior in fancyBox 3? For example to let also images fade in and out? I was not able to find any information on this in the documentation.
回答1:
As of fancyBox version 3.1.20, this is possible through the options animationEffect and transitionEffect. You can find the documentation here.
回答2:
Not sure if I'm getting this right... but if you want to fade in & out the images (between each transition) you can trick them by using a bit of CSS, add this to your jquery.fancybox.css:
.fancybox-slide.fancybox-slide--image {
opacity: 0;
-moz-transition: all 0.01s ease;
-o-transition: all 0.01s ease;
-webkit-transition: all 0.01s ease;
transition: all 0.01s ease;}
.fancybox-slide.fancybox-slide--image.fancybox-slide--complete {
opacity: 1!important;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;}
And also modify the speed of the jquery.fancybox.js lib to:
// Animation duration in ms
speed : 100
Disclaimer: I'm just a mortal and this is not the neatest solution, but worked for me (:
来源：https://stackoverflow.com/questions/42505524/transitions-in-fancybox-3