javascript - 子元素在使用velocity.js和blast.js时开始不透明

我有一个简单的包装div，可以使用velocity.js UI包进行动画处理。在完整的回调函数中，我使用UI pack和blast.js的组合为三个句子添加动画。

问题在于，最初显示了我的句子，然后才对其进行动画处理。在将包装div动画化为可见之后，它们应该不可见。

如果我不为包装器div设置动画，则一切工作正常，猜测动画过程中的不透明度设置会与子元素混淆。

$('.wrap').velocity('transition.slideUpIn', {
    delay: 1000,
    display: null,
    complete : function(){
      $(".animated")
      .blast({ delimiter: "character" })
      .velocity("transition.fadeIn", {
        display: null,
        duration: 1000,
        stagger: 60,
        delay: 400
      });
    }
})

这是看问题的小提琴：http://jsfiddle.net/vcsr6aqj/1/

最佳答案

问题在于您的p标记不在opacity: 0处，而是仅位于它们的字符处，这些字符位于具有span类的blast内。由于只有在调用$(".animated").blast({ delimiter: "character" })时才创建不可见字符，这意味着一旦包装器完成了幻影操作，句子将一直可见。因此，您有两种我可以想到的可能性。


在页面加载时用blast创建跨度字符，而不是在包装速度完成时创建，然后在创建的跨度上调用速度：

$(document).ready(function() {
    $(".animated").blast({ delimiter: "character" });
    $('.wrap').velocity('transition.slideUpIn', {
        delay: 1000,
        display: null,
        complete : function(){
            $(".animated .blast").velocity("transition.fadeIn", {
                display: null,
                duration: 1000,
                stagger: 60,
                delay: 400
            });
        }
    })
});

JSFiddle example
将类添加到具有p的opacity: 0标记中：

<p class="animated no-opacity">Sentence number one.</p>
<p class="animated no-opacity">Sentence number two.</p>
<p class="animated no-opacity">Just one sentence more.</p>

CSS：

.no-opacity {
    opacity: 0;
}

包装器完成速度后，从p标记中删除该类。另外，从速度属性中删除delay: 400，否则句子将显示400毫秒：

$(document).ready(function() {
    $('.wrap').velocity('transition.slideUpIn', {
        delay: 1000,
        display: null,
        complete : function(){
            $animated = $(".animated");
            $animated.removeClass("no-opacity");
            $animated.blast({ delimiter: "character" })
                     .velocity("transition.fadeIn", {
                        display: null,
                        duration: 1000,
                        stagger: 60
                     });
        }
    })
});

JSFiddle example

关于javascript - 子元素在使用velocity.js和blast.js时开始不透明，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31683722/