fancyBox 3中的跃迁

Question

是否可以指定在fancyBox 3中使用哪个转换？我感兴趣的有三个过渡：

1. 开放式滑梯/廊
2. 在幻灯片之间导航
3. 封闭滑梯/廊

默认情况下，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，查看它的运行情况，包括导航转换。对于我们拥有的图像：

1. 放大
2. 水平滑动
3. 缩小

对于html内容，我们有：

1. 淡入
2. 水平滑动
3. 淡出

是否可以在fancyBox 3中更改此默认行为？例如，让图像也淡入和淡出？我无法在文档中找到有关这方面的任何信息。

Answer 1

在fancyBox版本3.1.20中，这可以通过选项animationEffect和transitionEffect实现。您可以找到文档这里。

Answer 2

不知道我是否做对了..。但是，如果您想要淡出图像(每次转换之间)，可以使用一些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

免责声明:我只是一个凡人，这不是最完美的解决方案，但为我工作过(：