Velocity.js/Blast.js从0开始不透明度 [英] Velocity.js/Blast.js starting opacity at 0

问题描述

我正在使用Velocity.js和Blast.js在每个单词中创建一个简单的负载作为动画……这是基本设置之一.我也在Cycle2上同时使用它.

I am using Velocity.js and Blast.js to create a simple load in each word as an animation... one of the basic setups. I am also using this alongside Cycle2.

我要解决的问题有些问题，无法从文档中解决.在整个cycle2滑块中的许多幻灯片上都可能存在速度/爆炸功能"，因此每次都需要重新运行.

I have a few issues with what I am trying to achieve that I cannot work out from the documentation. A 'Velocity/Blast function' can exist on many slides throughout in a cycle2 slider so it needs to re-run each time.

这是我要实现的目标:

1. Velocity动画每次都需要从不透明度0开始...因此，当您循环播放幻灯片时，它从0到1运行，而不是显示它，然后将其隐藏，然后运行动画.
2. 在循环滚动下一个/上一个滑块时，它应重新运行并像以前一样从0开始.
3. 删除每个单词的过渡/淡入淡出，只需将其作为显示/隐藏即可.

我希望这是有道理的.我创建了一个简单的JSFiddle，向您展示了基本设置以及到目前为止的内容.希望您能提供帮助.

I hope this makes sense. I have created a bare bones JSFiddle to show you a basic set up and what I have so far. Hope you can help.

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个问题:

Here you go: http://jsfiddle.net/h3vo8LL1/2/ . You had 2 issues there:

1. 您需要将传入的幻灯片元素传递到featuredProjectTextAnimation()并在其中找到.animated元素，而不是选择文本幻灯片的 all .
2. 您需要首先隐藏每个幻灯片，例如，在这里，我将传出幻灯片元素上的opacity设置为0，在begin上将其设置为1.也可以使用display: none或一切适合您.

1. You need to pass the incoming slide element to featuredProjectTextAnimation() and find the .animated element in it, instead of selecting all of your text slides.
2. You need to have each slide initially hidden, here, just for example, I set opacity to 0 on the outgoing slide element, and on begin I set it to 1. You can also use display: none or whatever suits you.

HTH！

这篇关于Velocity.js/Blast.js从0开始不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！