我正在使用Velocity.js和Blast.js在每个单词中创建一个简单的负载作为动画……这是基本设置之一。我也在Cycle2上使用了它。
我要解决的问题有些问题，无法从文档中解决。在整个cycle2滑块中的许多幻灯片上都可能存在“速度/爆炸功能”，因此每次都需要重新运行。
这是我要实现的目标：
Velocity动画每次都需要从不透明度0开始...因此，当您循环播放幻灯片时，它从0到1运行，而不是显示它，然后将其隐藏，然后运行动画。
当您循环滑动下一个/上一个滑块时，它应该重新运行并从0开始像以前一样。
删除每个单词的过渡/淡入淡出，只需将其作为显示/隐藏即可。
我希望这是有道理的。我创建了一个简单的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 <= 1) {
$this.next('.home-slider-pager').remove();
$this.prev('.home-slider-navigation').remove();
}
$this.cycle({
fx: 'fade',
slides: '> .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();
});
});
}
最佳答案
在这里您可以：http://jsfiddle.net/h3vo8LL1/2/。
您那里有2个问题：
您需要将传入的幻灯片元素传递到featuredProjectTextAnimation()并在其中找到.animated元素，而不是选择所有文本幻灯片。
您需要首先隐藏每张幻灯片，在这里，例如，我在传出的幻灯片元素上将opacity设置为0，在begin上将其设置为1。您也可以使用display: none或任何适合您的设置。
HTH！
关于javascript - Velocity.js/Blast.js从0开始不透明度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28614890/