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

Question

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

我在尝试实现的目标方面存在一些问题，无法从文档中解决。 'Velocity/Blast function' 可以存在于循环 2 滑块中的许多幻灯片中，因此每次都需要重新运行。

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

速度动画每次都需要从 opacity:0 开始...所以当您循环到幻灯片时它运行从 0 到 1 而不是显示它，然后隐藏它，然后运行设置动画。
当您循环滑块 next/prev 时，它应该重新运行并像以前一样从 0 开始。
删除每个单词的 transition/fade 并简单地将其作为 show/hide.

我希望这是有道理的。我创建了一个基本的 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 元素，而不是选择 all 文本幻灯片。
你需要让每张幻灯片初始隐藏，这里只是举个例子，我在传出的幻灯片元素上将 opacity 设置为 0，而在 begin 上我将其设置为 1。你可以也可以使用 display: none 或任何适合您的方式。

HTH！

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

Velocity.js/Blast.js starting opacity at 0

javascript

jquery

jquery-cycle2

velocity.js