fancyBox 3中的过渡 [英] Transitions in fancyBox 3
问题描述
是否可以指定在fancyBox 3中使用哪个转换?我感兴趣的转换有3种:
Is it possible to specify which transition to use in fancyBox 3? There are 3 transitions I'm interested in:
- 打开幻灯片/画廊
- 在幻灯片之间导航
- 关闭幻灯片/画廊
默认情况下，fancyBox 3对不同类型的内容使用不同的过渡.
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>
查看此 codePen 可以看到它的实际效果，包括导航过渡.对于图像，我们有:
Look at this codePen to see it in action, including the navigation transitions. For images we have:
- 放大
- 水平滑动
- 缩小
对于html内容，我们有:
For html content we have:
- 淡入
- 水平滑动
- 淡出
是否可以在fancyBox 3中更改此默认行为?例如，也让图像淡入和淡出吗?我在文档中找不到任何相关信息.
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.
推荐答案
从fancyBox版本3.1.20开始，可以通过选项animationEffect和transitionEffect来实现.您可以在此处找到文档.
As of fancyBox version 3.1.20, this is possible through the options animationEffect and transitionEffect. You can find the documentation here.
这篇关于fancyBox 3中的过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
