fancyBox 3 中的过渡

Question

是否可以指定在 fancyBox 3 中使用哪个转换？我对 3 个转换感兴趣：

打开slide/gallery
在幻灯片之间导航
关闭slide/gallery

默认情况下，fancyBox 3 对不同类型的内容使用不同的过渡效果。

<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 以了解它的实际效果，包括导航转换。对于图像，我们有：

放大
水平滑动
缩小

对于 html 的内容，我们有：

淡入
水平滑动
淡出

是否可以在 fancyBox 3 中更改此默认行为？例如让图像也淡入淡出？我无法在 documentation.

中找到任何相关信息

Answer 1

不确定我是否做对了......但是如果你想淡入淡出图像（在每次转换之间）你可以通过使用一点 CSS 来欺骗它们，添加这个给你的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;}

同时修改jquery.fancybox.js库的速度为：

// Animation duration in ms
speed : 100

免责声明：我只是一个凡人，这不是最好的解决方案，但对我有用（：

Answer 2

从 fancyBox 版本 3.1.20 开始，这可以通过选项 animationEffect 和 transitionEffect 实现。您可以找到文档 here.

fancyBox 3 中的过渡

Transitions in fancyBox 3

javascript

fancybox

fancybox-3