Question

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

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

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

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

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

//
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个问题：

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

HTH！

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

1 个答案: