javascript - 使用 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

问题是您的 p 标签不在 opacity: 0，而只是它们的字符，它们在 span 内作为类 blast。因为你的隐形 Angular 色只有在你调用 $(".animated").blast({ delimiter: "character"}) 时才会创建，这意味着一旦你的包装器完成它的显现，句子就会直到那时可见。所以你有两种我能想到的可能性。

1. 在页面加载时使用 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

2. 向具有不透明度: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 标签中删除该类。此外，从您的速度属性中删除 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