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

Question

我有一个简单的包装器 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
      }); 
    }
})

下面是fiddle看问题：http://jsfiddle.net/vcsr6aqj/1/

Answer 1

给你 (fiddle)。我相信还有更优雅的解决方案。

似乎 slideUpIn 使 opacity 从 0 变为 1，包括 .animated 的不透明度，这可能是 'inherited'。将它设置为 0 以隐藏它可以修复它，但是 .blast() 不起作用，所以我们再次启用它。

Answer 2

问题是您的 p 标签不在 opacity: 0，而只是它们的字符，这些字符在 span 中 class 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

将 class 添加到具有 opacity: 0:

的 p 标签

<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 标签中删除 class。此外，从速度属性中删除 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

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

Child elements starting opacity while using velocity.js and blast.js

javascript

jquery

css-animations

velocity.js