Velocity.js / Blast.js在0处开始不透明度

我正在使用Velocity.js和Blast.js在每个单词中创建一个简单的加载作为动画…基本设置之一。 我也在和Cycle2一起使用它。

我有一些问题，我想要实现的目标，我无法从文档中解决。 在“循环2”滑块中，“速度/爆炸function”可以存在于许多幻灯片中，因此每次都需要重新运行。

这就是我想要实现的目标：

1. Velocity动画需要从不透明度开始：每次都是0 …所以当你循环到幻灯片时，它会从0到1运行而不是显示它，然后隐藏它，然后运行动画。
2. 当您循环滑块next / prev时，它应重新运行并从0开始，如前所述。
3. 删除每个单词的过渡/淡入淡出，只需将其作为显示/隐藏。

我希望这是有道理的。 我已经创建了一个简单的JSFiddle来向您展示一个基本的设置和我到目前为止所拥有的。 希望你能帮忙。

http://jsfiddle.net/h3vo8LL1/1/

// function featuredProjectTextAnimation() { $('.home-section-container .each-section .each-slide.text .text-container.animated') .blast({ delimiter: 'word' }) .velocity('transition.fadeIn', { display: null, duration: 0, stagger: 100, delay: 400, begin: function() { // }, complete: function() { // } }); } // if ($('.home-slider-container').length > 0) { $('.home-slider-container .home-slider').each(function() { var $this = $(this); var slideCount = $this.find('.each-slide').length; if (slideCount  .each-slide', caption: $this.next('.home-slider-pager'), captionTemplate: '{{slideNum}}/{{slideCount}}', sync: true, timeout: 0, random: false, pagerActiveClass: 'active', next: $this.prev('.home-slider-navigation').find('.next'), prev: $this.prev('.home-slider-navigation').find('.prev'), loader: true, autoHeight: 'container', swipe: true }); $this.on('cycle-before', function() { }); $this.on('cycle-after', function() { featuredProjectTextAnimation(); }); }); } 

Answer 1

你去： http ： //jsfiddle.net/h3vo8LL1/2/ 。 那里有2个问题：

1. 您需要将传入的幻灯片元素传递给featuredProjectTextAnimation()并在其中找到.animated元素，而不是选择所有文本幻灯片。
2. 你需要让每个幻灯片最初都隐藏起来，这里，例如，我opacity播幻灯片元素上将opacity设置为0，然后在begin我将其设置为1.您还可以使用display: none或任何适合您的幻灯片。

HTH！