javascript - Velocity.js/Blast.js 从 0 开始不透明度

Question

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

我对我想要实现的目标有一些问题，无法从文档中解决。 “速度/爆炸函数”可以存在于整个 Cycle2 slider 中的许多幻灯片中，因此每次都需要重新运行。

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

1. 速度动画每次都需要从 opacity:0 开始...因此，当您循环播放幻灯片时，它会从 0 运行到 1，而不是先显示它，然后隐藏它，然后运行动画。
2. 当您循环 slider 下一个/上一个时，它应该重新运行并像以前一样从 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 <= 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();
        });
    });
}

Answer 1

给你:http://jsfiddle.net/h3vo8LL1/2/ 。您遇到了 2 个问题:

1. 您需要将传入的幻灯片元素传递给 featuredProjectTextAnimation() 并找到其中的 .animated 元素，而不是选择全部您的文本幻灯片。
2. 您需要将每张幻灯片最初隐藏，这里仅作为示例，我在传出幻灯片元素上将 opacity 设置为 0，并在 begin 上将其设置为1. 您还可以使用 display: none 或任何适合您的内容。

呵呵!